Google Maps API - несколько маркеров - ошибки массива - PullRequest
Новая
       8

Google Maps API - несколько маркеров - ошибки массива

0 голосов
/ 16 мая 2019

У меня есть простая ошибка, но я не могу найти проблему (возможно, очень простую).

У меня есть разные маркеры LatLng с информационными окнами для каждого из них. У меня есть два массива: один для позиций и один для контента. Но когда я зацикливаюсь на массивах, у меня появляется ошибка для второй итерации

Невозможно прочитать свойство '1' из неопределенного 

                $(window).on('load', function() {
                    var mapStyle = [{
                        'featureType': 'administrative',
                        'elementType': 'labels.text.fill',
                        'stylers': [{
                            'color': '#444444'
                        }]
                    }, {
                        'featureType': 'landscape',
                        'elementType': 'all',
                        'stylers': [{
                            'color': '#f2f2f2'
                        }]
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'road',
                        'elementType': 'all',
                        'stylers': [{
                            'saturation': -100
                        }, {
                            'lightness': 45
                        }]
                    }, {
                        'featureType': 'road.highway',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'simplified'
                        }]
                    }, {
                        'featureType': 'road.arterial',
                        'elementType': 'labels.icon',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'transit',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': [{
                            'color': '#4f595d'
                        }, {
                            'visibility': 'on'
                        }]
                    }];

                    var locations = [
                      [48.8742211,2.3029689],
                      [48.8675875,2.3511199],
                      [48.8889844,2.3859886],
                    ];

                    var info = [
                      ["Boulangerie", 25],
                      ["Boucherie", 47],
                      ["Boucherie 2", 18],
                    ];

                    var map = new google.maps.Map(document.getElementById("carte"), {
                        zoom: 14,
                        styles: mapStyle,
                        center: new google.maps.LatLng(48.8803486, 2.3173236)
                    });

                    for (var i = 0; i < locations.length; i++) {
                      console.log(i);
                      console.log(locations[i]);
                      console.log(info[i]);
                      var coords = locations[i];
                      var latLng = new google.maps.LatLng(coords[0], coords[1]);

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

                      var info = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });

                      google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          info.open(map, marker);
                        }
                      }(marker, i));
                    }
                });
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="carte" style="width:100%; height:100%"></div>

    </body>
      <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
      <script src="/js/snazzy-info-window.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>

1 Ответ

0 голосов
/ 16 мая 2019

Измените это 

var info = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });
 google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          info.open(map, marker);
                        }
 }(marker, i));

на 

var infoWindow = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });
 google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          infoWindow.open(map, marker);
                        }
                      }(marker, i));

У вас есть две переменные с одинаковым именем info

...