добавить дополнительную информацию в infowindow gmaps v3?

Question

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

function initialize() { 
    var latlng = new google.maps.LatLng(latitudes, longitudes); 

    var options = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var infoWindow = new google.maps.InfoWindow(); 
    var geocoder = new google.maps.Geocoder(); 
    map = new google.maps.Map(document.getElementById("mapa"), options);   

    var pontos = []; 
    if (coord.length > 1) { 
     for (var i = 0; i < coord.length; i++) { 
      var location = coord[i].split(","); 
      var dados = veic[i]; // // Veic [] is an array that at each position, I have some information. 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(location[0], location[1]), 
       map: map 
      }) 

      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent("<b>Dados: </b>Carregando..."); 
       infoWindow.open(map, this); 
       google.maps.event.addListener(infoWindow, 'domready', function() { 
        geocoder.geocode({ 'latLng': infoWindow.position }, function (results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 

          infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address 
           +"</br> Veículo: "+ dados)} // Here in this passage, I can not get information from this variable. 

        }); 
       }); 
      }); 
     } 

    } 
} 

Answer 1

Есть две проблемы, с кодом, как написано:

1. вам нужно замыкание функции (или какой-либо другой механизм), чтобы связать i с InfoWindow.
2. вам нужно использовать addListenerOnce для события domready.

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 
     var dados = veic[i]; // // Veic [] is an array that at each position, I have some information. 

     infoWindow.setContent("<b>Dados: </b>Carregando..."); 
     infoWindow.open(map, this); 
     google.maps.event.addListenerOnce(infoWindow, 'domready', function() { 
      geocoder.geocode({ 
       'latLng': infoWindow.position 
      }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
         infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address + "</br> Veículo: " + dados); 
       } // Here in this passage, I can not get information from this variable. 

      }); 
     }); 
    }; 
})(marker, i)); 

working fiddle

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

function initialize() { 
 
    var latlng = new google.maps.LatLng(45, -85); 
 
    var coord = ["45,-85", "45.001,-85.01"]; 
 
    var veic = ["some information", "other information"]; 
 

 
    var options = { 
 
    zoom: 12, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    map = new google.maps.Map(document.getElementById("mapa"), options); 
 

 
    var pontos = []; 
 
    if (coord.length > 1) { 
 
    for (var i = 0; i < coord.length; i++) { 
 
     var location = coord[i].split(","); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(location[0], location[1]), 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      var dados = veic[i]; // // Veic [] is an array that at each position, I have some information. 
 

 
      infoWindow.setContent("<b>Dados: </b>Carregando..."); 
 
      infoWindow.open(map, this); 
 
      google.maps.event.addListenerOnce(infoWindow, 'domready', function() { 
 
      geocoder.geocode({ 
 
       'latLng': infoWindow.position 
 
      }, function(results, status) { 
 
       if (status == google.maps.GeocoderStatus.OK) { 
 

 
       infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address + "</br> Veículo: " + dados); 
 
       } // Here in this passage, I can not get information from this variable. 
 

 
      }); 
 
      }); 
 
     }; 
 
     })(marker, i)); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#mapa { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

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