Por el bien de este argumento, tengo mis dos devoluciones de llamada de mapas aquí:

function initMap() {
  // The location of Intersection One
  var intersection_one = {lat: [lat1], lng: [lng1]};
  var image = 'assets/images/map_icon_marker.ico';
  // The map, centered at Intersection One
  var map = new google.maps.Map(
      document.getElementById('map_one'), {zoom: 18, center: intersection_one, mapTypeId: 'satellite'});
  // The marker, positioned at Intersection One
  var marker = new google.maps.Marker({position: intersection_one, map: map,  icon: image});
  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.getPosition());
    }, 3000);
  });
   // Allow users to click on the map to open in a new window
  google.maps.event.addListener(map, "click", function(){
     window.open("https://www.google.com/maps/@[lat/lng1m/data=")
});
// Allow users to click on the marker to open in a new window
  google.maps.event.addListener(marker, "click", function(){
     window.open("https://www.google.com/maps/@5[lat/lng1m/data=data=")
});
}

function initMap() {
  // The location of Intersection Two
  var intersection_two = {lat: [lat2], lng: [lng2]};
  var image = 'assets/images/map_icon_marker.ico';
  // The map, centered at Intersection Two
  var map2 = new google.maps.Map(
      document.getElementById('map_two'), {zoom: 19, center: intersection_two, mapTypeId: 'satellite'});
  // The marker, positioned at Intersection One
  var marker2 = new google.maps.Marker({position: intersection_two, map: map2,  icon: image});
  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker2.getPosition());
    }, 3000);
  });
   // Allow users to click on the map to open in a new window
  google.maps.event.addListener(map2, "click", function(){
     window.open("https://www.google.com/maps/@[lat/lng1]z")
});
// Allow users to click on the marker to open in a new window
  google.maps.event.addListener(marker2, "click", function(){
     window.open("https://www.google.com/maps/@[lat/lng1]zz")
});
}

Sé que esta forma no funciona, pero me pregunto cómo puedo encadenar dos funciones setTimeOut (centrando el mapa) y dos funciones addListener que permiten hacer clic en el mapa y abrirlo en una nueva ventana.

Cuando encadenado las dos funciones setTimeout juntas así (código completo):

function initMap() {
  // The location of Intersection One
  var intersection_one = {lat: 55.777034, lng: 37.583926};
  var intersection_two = {lat: -33.7386872, lng: 150.9154922};
  var image = 'assets/images/map_icon_marker.ico';
  // The map, centered at Intersection One
  var map = new google.maps.Map(
      document.getElementById('map_one'), {zoom: 18, center: intersection_one, mapTypeId: 'satellite'});
   var map2 = new google.maps.Map(
      document.getElementById('map_two'), {zoom: 19, center: intersection_two, mapTypeId: 'satellite'});    
  // The marker, positioned at Intersection One
  var marker = new google.maps.Marker({position: intersection_one, map: map,  icon: image});
  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.getPosition());
    }, 3000);
    });
    var marker2 = new google.maps.Marker({position: intersection_two, map: map2,  icon: image});
  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map2.panTo(marker2.getPosition());
    }, 3000);
    });

   // Allow users to click on the map to open in a new window
  google.maps.event.addListener(map, "click", function(){
     window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
// Allow users to click on the marker to open in a new window
  google.maps.event.addListener(marker, "click", function(){
     window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
}

Puedo hacer que el primer mapa se vuelva a centrar, pero no el segundo mapa, a menos que el primer mapa se vuelva a centrar. Entonces, si un usuario simplemente mueve el segundo mapa, no se vuelve a centrar a menos que mueva el primer mapa.

-1
Paul Davis 30 ago. 2020 a las 22:15

1 respuesta

La mejor respuesta

Resuelto (había errores tipográficos en el original). Es posible tener múltiples mapas y múltiples funciones setTimeout y addListener en múltiples mapas de Google. Aquí está el código que utilicé:

function initMap() {
  // The location of Intersection One
  var intersection_one = {lat: 55.777034, lng: 37.583926};
  var intersection_two = {lat: -33.738541, lng: 150.917933};
  var image = 'assets/images/map_icon_marker.ico';
  // The map, centered at Intersection One
  var map = new google.maps.Map(
      document.getElementById('map_one'), {zoom: 18, center: intersection_one, mapTypeId: 'satellite'});
   var map2 = new google.maps.Map(
      document.getElementById('map_two'), {zoom: 19, center: intersection_two, mapTypeId: 'satellite'});    
  // The marker, positioned at Intersection One
  var marker = new google.maps.Marker({position: intersection_one, map: map,  icon: image});
  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.getPosition());
    }, 3000);
    });
    var marker2 = new google.maps.Marker({position: intersection_two, map: map2,  icon: image});
  map2.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map2.panTo(marker2.getPosition());
    }, 3000);
    });

   // Allow users to click on the map to open in a new window
  google.maps.event.addListener(map, "click", function(){
     window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
google.maps.event.addListener(map2, "click", function(){
     window.open("https://www.google.com/maps/@-33.7385745,150.9177533,120m/data=!3m1!1e3")
});
// Allow users to click on the marker to open in a new window
  google.maps.event.addListener(marker, "click", function(){
     window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
 google.maps.event.addListener(marker2, "click", function(){
     window.open("https://www.google.com/maps/@-33.7385745,150.9177533,120m/data=!3m1!1e3")
});
}
0
Paul Davis 30 ago. 2020 a las 20:31