Foros del Web - Ver Mensaje Individual

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 :/ */
}