0

Quiero hacer un "directorio" de mapas, necesito mostrar más de 30 mapas diferentes en diferentes páginas. Para ello estoy utilizando el API de google maps, quiero hacer una función que contenga todos los mapas y dependiendo de la pagina llamar al mapa con un identificador sea la clase o id, cada una con diferentes coordenadas.

Esto es lo que tengo hasta el momento: El problema es que solo funciona con el primer mapa o sea mapa1 si quiero llamar el mapa2 en otra pagina me toca cambiar el lugar y poner la variable mapa2 primero si no no se muestra, alguna idea?

    function initialize() {
     var latitud1 = new google.maps.LatLng(39.630159,-84.175937);
     var latitud2 = new google.maps.LatLng(33.677705,-117.852974);
     var latitud3 = new google.maps.LatLng(51.520614,-0.121825);
     var opcionesMapa1 = {
     zoom: 5,
     center: latitud1,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: 0
     }
     var opcionesMapa2 = {
     zoom: 5,
     center: latitud2,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: 0
     }
     var opcionesMapa3 = {
     zoom: 5,
     center: latitud3,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: 0
     }

     var mapa1 = new google.maps.Map(document.getElementById('mapa1'), opcionesMapa1);
     var mapa2 = new google.maps.Map(document.getElementById('mapa2'), opcionesMapa1);
     var mapa3 = new google.maps.Map(document.getElementById('mapa3'), opcionesMapa1);

     var marker1 = new google.maps.Marker({
     position: latitud1,
     map: mapa1,
     title: 'Oficina 1'
     });
     var marker2 = new google.maps.Marker({
     position: latitud2,
     map: mapa2,
     title: 'Oficina 2'
     });
     var marker3 = new google.maps.Marker({
     position: latitud3,
     map: mapa3,
     title: 'Oficina 3'
     });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

Aqui seria una de la paginas como quisiera llamar el mapa: O sea esta pagina podría ser genérica otra pagina seria tendría una estructura "similar" pero estaría mapa2 pero no me sale no carga. mapa

      </body>
      <script src="https://maps.google.com/maps/api/js?libraries=adsense&amp;sensor=false"></script>
     <script src="main.js"></script>
    </html>
2

1 respuesta 1

1

De una forma muy sencilla y elegante lo encontré, quizá a alguien mas le sirve.

        $('.map').each(function (index, Element) {
        var coords = $(Element).text().split(",");
        if (coords.length != 3) {
            $(this).display = "none";
            return;
        }
        var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
        var myOptions = {
            zoom: parseFloat(coords[2]),
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            mapTypeControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            }
        };
        var map = new google.maps.Map(Element, myOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
    });

Y en la pagina donde se quiere mostrar el mapa enciamos las coordenadas conseguidas decimales, seguido de una coma el factor de zoom del mapa.

Pagina 1

<body>
        <div class="map" id="mapa 1">-0.120314, -78.493700,17</div>
        <div class="map" id="Otro mapa">-0.120314, -78.493700,17</div>

</body>

. . . Pagina etc..

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.