Cargar datos desde BD

BaByRoDrI · #1 (**permalink**) 26/09/2011, 12:33

Ando realizando una aplicación en PHP+JavaScript/AJAX+Google Maps API, y basicamente lo que hago es mostrar un mapa de mi ciudad (Ciudad de México), y mediante un select muestro sus 16 delegaciones, cuando el usuario selecciona una, el mapa hace un zoom y se reubica en dicha zona y otro select se muestra con los diferentes tipos de tiendas que puedene encontrar en dicha zona.

Ahora el detalle esta en que las tiendas van a tener su marker en el mapa, pero sus coordenadas y toda su info, esta guardada en una BD, ¿Cómo logro cargar esos datos de la BD para que el JS los lea y los interprete? :S.

Acá les dejo el código de la app:

index.html

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Marker Simple</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
    <script type="text/javascript" src="maps.js"></script>
</head>
 
<body onload="iniciar()">
 
<form name="f1">
    <select name="delegacion" onchange="cambiar_mapa()">
        <option value="0" selected>Seleccione...</option>
        <option value="1">Alvaro Obregón</option>
        <option value="2">Azcapotzalco</option>
        <option value="3">Benito Juárez</option>
        <option value="4">Coyoacán</option>
        <option value="5">Cuajimalpa</option>
        <option value="6">Cuauhtémoc</option>
        <option value="7">Gustavo A. Madero</option>
        <option value="8">Iztacalco</option>
        <option value="9">Iztapalapa</option>
        <option value="10">Magdalena Contreras</option>
        <option value="11">Miguel Hidalgo</option>
        <option value="12">Milpa Alta</option>
        <option value="13">Tláhuac</option>
        <option value="14">Tlalpan</option>
        <option value="15">Venustiano Carranza</option>
        <option value="16">Xochimilco</option>
    </select>
 
    <select name="local" onchange="mostar_locales()">
        <option value="-">-</option>
    </select>
</form>
 
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
 
</body>
</html>

maps.js

Código Javascript:

Ver originalvar coords_deleg = [
    new google.maps.LatLng(19.437457,-99.131126),
    new google.maps.LatLng(19.373341,-99.223394),
    new google.maps.LatLng(19.483343,-99.183898),
    new google.maps.LatLng(19.372207,-99.157891),
    new google.maps.LatLng(19.349534,-99.161768),
    new google.maps.LatLng(19.361033,-99.284163),
    new google.maps.LatLng(19.420378,-99.159694),
    new google.maps.LatLng(19.482453,-99.112501),
    new google.maps.LatLng(19.395201,-99.097896),
    new google.maps.LatLng(19.357794,-99.093304),
    new google.maps.LatLng(19.316246,-99.239774),
    new google.maps.LatLng(19.418354,-99.201078),
    new google.maps.LatLng(19.191096,-99.023645),
    new google.maps.LatLng(19.268855,-99.005041),
    new google.maps.LatLng(19.308875,-99.22514),
    new google.maps.LatLng(19.439157,-99.113123),
    new google.maps.LatLng(19.274202,-99.137936)
];
 
function iniciar() {
    var myOptions = {
        panControl: false,
        mapTypeControl: false,
        zoom: 11,
        center: coords_deleg[0],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
 
function select_local() {
    var delegacion = document.f1.delegacion[document.f1.delegacion.selectedIndex].value;
    if (delegacion != 0) {
        document.f1.local.length = 3;
        document.f1.local.disabled = false;
        document.f1.local.options[0].value = "-";
        document.f1.local.options[0].text = "-";
        document.f1.local.options[1].value = "1";
        document.f1.local.options[1].text = "Local";
        document.f1.local.options[2].value = "2";
        document.f1.local.options[2].text = "Bodegas";
    } else {
        document.f1.local.length = 1;
        document.f1.local.disabled = true;
        document.f1.local.options[0].value = "-";
        document.f1.local.options[0].text = "-";
    }
    document.f1.local.options[0].selected = true;
}
 
function cambiar_mapa() {
    var delegacion = document.f1.delegacion[document.f1.delegacion.selectedIndex].value;
    var myOptions = {
        panControl: false,
        mapTypeControl: false,
        zoom: 13,
        center: coords_deleg[delegacion],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    select_local();
}
 
function mostrar_locales() {
    /* Aqui necesito cargar coordenadas de una BD y ponerlos en el mapa :/ */
}

maycolalvarez · #2 (**permalink**) 26/09/2011, 14:56

básicamente necesitas de un script del lado del servidor (PHP, JSP; ASP, entre otros) para conectarte y leer los datos de la base de datos, luego dumpearias un JSON hacia una variable JS de modo que al cargar el navegador ya tenga los datos.

lo mismo aplica si pretendes cargar dichos datos vía AJAX en la cual tu respuesta del servidor pude ser un JSON, FW como jQuery disponen de funciones como jquery.paseJSON()