0

Estoy queriendo cargar 2 mapas con la aplicación de google en un mismo index.html. Los mapas al probarlos uno por uno no tengo problema, ambos se cargan y funcionan correctamente.

El primer mapa muestra la ubicación del usuario en un <div id="map"> de la siguiente manera:

mapa 1

var map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,


    styles: [{
        "featureType": "administrative.country",
        "elementType": "labels.text.stroke",
        "stylers": [{
          "weight": 1.5
        }]
      },
      {
        "featureType": "administrative.land_parcel",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "administrative.neighborhood",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "landscape.natural.terrain",
        "stylers": [{
          "saturation": 40
        }]
      },
      {
        "featureType": "poi",
        "stylers": [{
            "saturation": 25
          },
          {
            "visibility": "simplified"
          },
          {
            "weight": 2
          }
        ]
      },
      {
        "featureType": "poi.attraction",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "poi.business",
        "stylers": [{
          "visibility": "off"
        }]
      },
      {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [{
          "visibility": "on"
        }]
      },
      {
        "featureType": "transit.line",
        "stylers": [{
            "color": "#5485c0"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [{
            "color": "#5485c0"
          },
          {
            "saturation": 40
          },
          {
            "lightness": 15
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text",
        "stylers": [{
          "visibility": "on"
        }]
      }
    ]
  });
  infoWindow = new google.maps.InfoWindow;

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: {
          lat: pos.lat,
          lng: pos.lng
        },
        title: 'Hey! Estas aquí'
      });

      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
}

#map {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=initMap">
  </script>
  
</body>

La segunda función carga un GMAP de la API de javascript en un <div id='map2'> que tiene la cualidad de poder arrastrar el marker y guarda las coordenadas en un <input type="text" id='coords'>

mapa 2

var marker;          //variable del marcador
var coords = {};    //coordenadas obtenidas con la geolocalización

 

//Funcion principal
initCoords = function () 
{

    //usamos la API para geolocalizar el usuario
        navigator.geolocation.getCurrentPosition(
          function (position){
            coords =  {
              lng: position.coords.longitude,
              lat: position.coords.latitude
            };
            setMapa(coords);  //pasamos las coordenadas al metodo para crear el mapa
            
           
          },function(error){console.log(error);});
    
}



function setMapa (coords)
{   
      //Se crea una nueva instancia del objeto mapa
      var map = new google.maps.Map(document.getElementById('map2'),
      {
        zoom: 13,
        center:new google.maps.LatLng(coords.lat,coords.lng),

      });

      //Creamos el marcador en el mapa con sus propiedades
      //para nuestro obetivo tenemos que poner el atributo draggable en true
      //position pondremos las mismas coordenas que obtuvimos en la geolocalización
      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(coords.lat,coords.lng),

      });
      //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica 
      //cuando el usuario a soltado el marcador
      marker.addListener('click', toggleBounce);
      
      marker.addListener( 'dragend', function (event)
      {
        //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
        document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
      });
}

//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

      function abrirGmap {
      $('#modalGmap').on('shown.bs.modal',function(){

          initCoords();
          console.log("si");
      })
    }
html, body {

width: 100%;
height: 100%;
padding:0;
margin: 0;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<!-- comienzo del input id='coords' -->

<input id="coords" type="text" class="form-control" value="Ubicación" data-toggle="modal" data-target="#modalGmap"/>

<!-- Comienzo del modal -->

<div class="modal fade" id="modalGmap" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
						      <div class="modal-dialog modal-dialog-centered" role="document" style="width: 60%; height: 60%;">
						        <div id="map2" class="modal-content" style="width: 100%; height: 100%;">
						          <div class="modal-header">
						            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>

						            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						              <span aria-hidden="true">&times;</span>
						            </button>
						          </div>
						          <div class="modal-body">
						          </div>
						        </div>
						      </div>
						    </div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg">
    </script>
 </body>

El problema parece ser que al cargar la clave de la API de google esta hace un callback=Function() osea llama directamente a la función cuando se carga, haciendo referencia a una sola de las dos funciones.

cosas que intenté:

probé borrar el callback=initMap y llamar a la función cuando el usuario hace clic en el <input id="coords"> pero cuando hago esto solo funciona el mapa 2 y el primero deja de funcionar.

probé borrar ambas funciones Javascript del index.html y separarlas en 2 archivos javascript distintos y en el index.html crear una función del tipo

Function initMaps {
    
    window.onload = function initMap();
    window.onload = function initCorrds();
  
}

 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg">
  </script>

Pensaba que con esto al llamar a los archivosmapa1.js y mapa2.js entre <head></head> cuando llegara al script y al web terminara de cargar las funciones se iniciarían... pero no funcionó.

también probé con la etiqueta onclick=function() y onload=function() en los respectivos divs donde deben cargarse los mapas... pero no funcionó.

Bueno eso a sido mas o menos todo. espero alguien pueda ayudarme a resolver!

Muchas gracias

PRUEBAS NUEVAS AL 17/12/2018

En base a la respuesta de un usuario intenté separar ambas funciones en 2 archivos diferentes gmap.js y GPSservice.js. Luego en index.html llamo a ambos archivos entre <head></head> con <script src js/gmap.jsetc. Luego antes de finalizar el </body> y debajo del script de la API de google cree la siguiente función

<script>
    function abrirGmap {

        initMap();
        initCoords();
    }

    window.onload = abrirGmap;

</script>

Esperaba que con esta función luego de cargar los archivos en el head y "encapsular" ambas funciones en una "función gatillo" que se cargaría mediante window.onload = abrirGmap;. El resultado: No funcionó.

El siguiente intento fue eliminar el window.onload = abrirGmap; de la función gatillo y agregar al script de la API de google un callback=abrirGmap. de la siguiente manera.

<script async defer src="https://maps.googleapis.com/maps/api/js? key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=abrirGmap">

el resultado: no funcionó.

SOLUCIÓN FINAL

Separé ambas funciones ena rchivos distintos como se menciona mas arriba. a continuación los llamo en el head del index.html como se menciona arriba y al final antes del body encapsulo las funciones y ejecuto de la siguiente manera.

<script>

    function abrirGmap() {

        initMap();
        initCoords();
    }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg&callback=abrirGmap">
</script>

1 respuesta 1

2

Tienes varios problems

Primero: Si quieres rendererizar dos mapas en la misma página no necesitas en absoluto llamar dos veces al script del API. Una vez basta. Dos veces te va a generar comportamientos inesperados como mínimo. Tampoco necesitas cargar dos veces jQuery.

Segundo Tu primer llamado al API está pasando como parámetro la función que se va a ejecutar cuando termine de cargar el script del API lo cual no tiene en absoluto relación con el momento en que termine de cargar el DOM. Por tanto no sacas nada tratando de meter ese comportamiento en window.onload.

Tercero Aunque tuviera sentido homologar la carga del script del API google maps a window.onload, cuando pones:

window.onload = function initMap();
window.onload = function initCorrds();

La segunda declaración pisa la primera. Y eso sin contar que sintácticamente eso no significa nada. Para invocar a una función no le antepones function.

Cuarto:

Si te olvidas por completo del evento window.onload y te limitas a definir una función que gatilla a las otras dos (y usas la siguiente sintaxis corregida)

function initMaps() {
   initMap();
   initCoords();
}

Necesitas que alguien o algo la invoque, de manera que sería momento de volver a añadir tu callback en el llamado al API (que es el único llamado que haces, olvídate de hacer 2):

<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMaps&key=AIzaSyBhSrbK0MeReqvKKFaK1umUYL_LDGSYBwg">

Además yo cambiaría el nombre de initMaps porque se ve muy parecido a initMap. Mejor le pondría initDosMapas o algo muy evidente.

Quinto (este no es un problema bloqueante)

Estás declarando una variable global map al inicio de tu script.

var map, infoWindow;

function initMap() { ... }

Y luego haces shadowing de ésta en tu segundo mapa:

function setMapa (coords)
{   
  //Se crea una nueva instancia del objeto mapa
  var map = new google.maps.Map(document.getElementById('map2'),
  {
    zoom: 13,
    center:new google.maps.LatLng(coords.lat,coords.lng),

  });

 ...
}

Al hacer eso la referencia a la variable se pierde en algunos ámbitos, y eso te puede llevar a confusiones.

4
  • gracias por responder. Al leer tu respuesta intente hacer lo siguiente. Separe las 2 funciones correspondientes a cada mapa en 2 archivos distintos a los que he llamado gmap.js y GPSservice.js. Desde index.html llamo a ambos archivos con src entre head y /head. Al final del body hice lo siguiente. <script> function abrirGmap { initMap(); initCoords(); } window.onload = abrirGmap; </script> y el script de la API quedó sin el callback. Como esto no funciono. probe eliminar el window.onload y agregue al script callback=abrirGmap. pero no funciono tampoco.
    – Macali
    Commented el 17 dic. 2018 a las 23:29
  • Amigo pude resolverlo! al final lo que me faltaba era que en la función <script> function abrirGmap { initMap(); initCoords(); } window.onload = abrirGmap; </script> falta los () luego de function abrirGmap.. quedó de la siguiente manera <script> function abrirGmap() { initMap(); initCoords(); }</script> luego la llamo en el script del API con callback=abrirGmap y funciona! muchas gracias
    – Macali
    Commented el 17 dic. 2018 a las 23:48
  • vale, pero quita cualquier referencia a window.onload. El ciclo de vida de la ventana no condiciona el momento en que google maps api termine de cargar, máxime si lo pones como asíncrono y diferido
    – ffflabs
    Commented el 18 dic. 2018 a las 17:17
  • Si, es lo que he hecho. Borre el window.onload y traslade la carga de la funcion al script de google con el callback=abrirGmap. En el futuro evitare usar el window.onload y en su defecto usare document.ready o por el estilo.muchas gracias
    – Macali
    Commented el 18 dic. 2018 a las 19:46

Tu Respuesta

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

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