Как addDomListener для нескольких карт Google на странице?

Как бы я переориентировал маркеры карт, если на одной странице несколько карт? У меня есть этот скрипт, который я создал, который работает как ожидалось, у меня есть все отдельные карты на странице с каждой картой, имеющей свой собственный маркер, это работает как ожидалось.

Проблема, с которой я сталкиваюсь, заключается в том, что мой addDomListener работает только на последней карте на моей странице.

Это пример HTML кода, который я использую для динамического создания карт.

<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, который я сейчас использую:

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);
    });

}

Как насчет возможности центрировать маркер для отдельной карты?

1 ответ

  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);
      }
    });
    

    доказательство концепции 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>