ページに複数のGoogleマップのDomListenerを追加するにはどうすればよいですか？

Question

1つのページに複数のマップがある場合、マップマーカーを再センタリングするにはどうすればよいですか？私はこのスクリプトを作成して、期待どおりに動作させるようにしています。私は個々の地図をページに持っています。

私が問題になっているのは、私のaddDomListenerが私のページ上の最後のマップ上でしか動かないということです。

これは、マップを動的に生成するために使用しているコードのHTMLの例です。

function initMap() { 

    var locations = []; 

    // Get All Maps By Class Name 
    var mapEl = document.getElementsByClassName("google-map"); 

    // For each map push data attribute to locations array 
    $(mapEl).each(function() { 
     var arr = []; 
     arr.push(parseFloat(this.dataset.lat)); 
     arr.push(parseFloat(this.dataset.lng)); 
     locations.push(arr) 
    }); 

    // Loop through each location and generate map 
    for (var i = 0; i < locations.length; i++) { 

     var latlng = {lat: locations[i][0], lng: locations[i][1]}; 

     var mapOptions = { 
      center: latlng, 
      mapTypeControl: false, 
      scrollwheel: false, 
      zoom: 14, 
      zoomControl: false, 
      styles: mapBrand 
     }; 

     var map = new google.maps.Map(document.getElementById('map'+i), mapOptions); 

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

    } 

    var center = map.getCenter(); 

    google.maps.event.addDomListener(window, 'resize', function() { 
     map.setCenter(center); 
    }); 

} 

がどのように個々のマップのマーカーを中央にできることについては行くだろう：

<div id="map0" class="google-map archive-map" data-lat="42.997394" data-lng="-78.180130"> 
<div id="map1" class="google-map archive-map" data-lat="41.997394" data-lng="-76.180130"> 
<div id="map2" class="google-map archive-map" data-lat="40.997394" data-lng="-74.180130"> 

これは私が現在使用しているJavascriptがありますか？

Answer 1

それぞれの地図とそれぞれに必要なセンターへの参照を保持し、それらを処理します（各地図の中心を設定する必要があります）。

// keep reference to map and center 
var map = new google.maps.Map(document.getElementById('map' + i), mapOptions); 
maps.push({map: map, center: map.getCenter()}); 

// process through all the maps, setting the center 
google.maps.event.addDomListener(window, 'resize', function() { 
    for (var i = 0; i < maps.length; i++) { 
    maps[i].map.setCenter(maps[i].center); 
    } 
}); 

proof of concept fiddle

コードスニペット：

function initMap() { 
 

 
    var locations = []; 
 
    var maps = []; 
 
    // Get All Maps By Class Name 
 
    var mapEl = document.getElementsByClassName("google-map"); 
 

 
    // For each map push data attribute to locations array 
 
    $(mapEl).each(function() { 
 
    var arr = []; 
 
    arr.push(parseFloat(this.dataset.lat)); 
 
    arr.push(parseFloat(this.dataset.lng)); 
 
    locations.push(arr) 
 
    }); 
 

 
    // Loop through each location and generate map 
 
    for (var i = 0; i < locations.length; i++) { 
 

 
    var latlng = { 
 
     lat: locations[i][0], 
 
     lng: locations[i][1] 
 
    }; 
 

 
    var mapOptions = { 
 
     center: latlng, 
 
     mapTypeControl: false, 
 
     scrollwheel: false, 
 
     zoom: 14, 
 
     zoomControl: false, 
 
     // styles: mapBrand 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map' + i), mapOptions); 
 
    maps.push({ 
 
     map: map, 
 
     center: map.getCenter() 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map 
 
    }); 
 
    } 
 

 
    var center = map.getCenter(); 
 

 
    google.maps.event.addDomListener(window, 'resize', function() { 
 
    for (var i = 0; i < maps.length; i++) { 
 
     maps[i].map.setCenter(maps[i].center); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map0, 
 
#map1, 
 
#map2 { 
 
    height: 30%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map0" class="google-map archive-map" data-lat="42.997394" data-lng="-78.180130"></div> 
 
<div id="map1" class="google-map archive-map" data-lat="41.997394" data-lng="-76.180130"></div> 
 
<div id="map2" class="google-map archive-map" data-lat="40.997394" data-lng="-74.180130"></div>