add more information to a infowindow gmaps v3?

Question

On my map I own several Markers and each marker one infowindow, I have problems when adding more components to my infowindow where I have an Array and every one position information for each marker, see the code, the variable data that is the value of position of each array is not initialized in the addListener method.

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.

                    });
                });
            });
        }

    }
}

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that exhibits the issue. What are `latitude`, `longitude`, `coords`, `veic`? — geocodezip, May 08 '15 at 14:26
duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, May 08 '15 at 14:31

geocodezip · Accepted Answer · 2015-05-08T16:26:41.203

There are two issues with the code as written:

you need function closure (or some other mechanism) to associate i with the infowindow.
you need to use addListenerOnce for the domready event.

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

code snippet:

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>

add more information to a infowindow gmaps v3?

1 Answers1