Маркеры API и JavaScript API Google Maps

Question

У меня возникла проблема с методом open на объекте infoWindow.

Я хочу, чтобы все мои объекты утилиты моей карты динамически, но когда вызван метод open, он вызывает ошибку, потому что связанный объект infoWindow связан с undefined.

Вот мой код:

// Markers & infoWindows 
    var markers = []; 
    var infoWindows = []; 

    for(var i=0; i<myList.length; i++) { 
     markers.push(
      new google.maps.Marker({ 
       position: myList[i].coord, 
       map: map, 
       title: myList[i].city 
      }) 
     ); 
     infoWindows.push(
      new google.maps.InfoWindow({ 
       content: myList[i].address 
      }) 
     ); 
     markers[i].addListener('click', function() { 
      infoWindows[i].open(map, markers[i]); 
     }); 
    } 

[Где myList это просто Arry из JSON отформатированных объектов. ]

Все маркеры и информационные окна хорошо установлены. Я могу получить доступ к их свойствам и распечатать их на консоли.

Но, как я сказал, infoWindows[i] напечатан undefined, поэтому метод open не найден. Контрарио I я могу получить доступ и распечатать атрибут content этого объекта infoWindows[i]. Кажется странным мне ...

Если кто-то может объяснить мне, что я буду рад :)

Answer 1

Связанные вопрос: Google Maps JS API v3 - Simple Multiple Marker Example

Когда цикл завершает i остается в infoWindows.length, что мимо конец массива. Один из способов исправить это с замыканием функции на i:

markers[i].addListener('click', (function(i) { 
return function() { 
    infoWindows[i].open(map, markers[i]); 
}}(i))); 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    // Markers & infoWindows 
 
    var markers = []; 
 
    var infoWindows = []; 
 

 
    for (var i = 0; i < myList.length; i++) { 
 
    markers.push(
 
     new google.maps.Marker({ 
 
     position: myList[i].coord, 
 
     map: map, 
 
     title: myList[i].city 
 
     }) 
 
    ); 
 
    infoWindows.push(
 
     new google.maps.InfoWindow({ 
 
     content: myList[i].address 
 
     }) 
 
    ); 
 
    markers[i].addListener('click', (function(i) { 
 
     return function() { 
 
     infoWindows[i].open(map, markers[i]); 
 
     } 
 
    }(i))); 
 

 
    bounds.extend(markers[i].getPosition()); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var myList = [{ 
 
    coord: { 
 
    lat: 42, 
 
    lng: -72 
 
    }, 
 
    city: "Somewhere", 
 
    address: "Somewhere" 
 
}, { 
 
    coord: { 
 
    lat: 40.7127837, 
 
    lng: -74.0059413 
 
    }, 
 
    city: "New York, NY, USA", 
 
    address: "New York, NY, USA" 
 
}, { 
 
    coord: { 
 
    lat: 40.735657, 
 
    lng: -74.1723667 
 
    }, 
 
    city: "Newark, NJ, USA", 
 
    address: "Newark, NJ, USA" 
 
}];

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>