How to pass a variable into a function defined in the argument of another function in JavaScript?

Question

I am working on Google Maps API v3 javascript. I am using the Geocoder feature where I am passing a city name and plotting it on the map. Along with this marker, I want to add a separate info window for every marker but I am not able to do that. All the infowindows are displaying the content that was set for the last marker instead of setting a different info window for each. Please find the javascript code below:

   function initialize() {
              geocoder = new google.maps.Geocoder();
              var address = document.getElementById('address').value;
              var jString = JSON.parse(address);
              var infowindow;
              for (var key in jString) {
                  contentStr = JSON.stringify(jString[key]); //This is step where I am setting the content which is independent for every maker
                  if (jString.hasOwnProperty(key)) {
                      geocoder.geocode( { 'address': key}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                              map.setCenter(results[0].geometry.location);
                              var marker = new google.maps.Marker({
                                  map: map,
                                  position: results[0].geometry.location
                              });
                              infowindow = new google.maps.InfoWindow({
                                  content: contentStr//Not able to access 'contentStr' set above.
                                  });
                              infowindow.open(map,marker);  


                            } else {
                              alert('Geocode was not successful for the following reason: ' + status);
                            }
                          });

                  }
              }

              var latlng = new google.maps.LatLng(-34.397, 150.644);
              var mapOptions = {
                zoom: 8,
                center: latlng
              }
              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }


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

After debugging I understood that for some reason, the value of the variable 'contentStr' being set during the last iteration of 'for' loop is only being used for all the below function calls made:

   geocoder.geocode( { 'address': key}, function(results, status) {

So basically, I am not able to pass the variable 'contentStr' into the function defined in the argument of another function. I think I am missing something basic here. Could anyone please guide me about this?

Thank you!

That is exactly what I am looking for. Sorry for duplication guys. I am new to JavaScript and I am not aware of the closure concept. Thank you! :) — Srikanth Kandalam, Apr 24 '14 at 00:21

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I have had the same problem many times. Stolen from link below. You need to attach the infowindow to your marker.

Marker content (infoWindow) Google Maps

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });
}

A second way of doing this. :

Google Maps API V3 infoWindow - All infoWindows displaying same content

No problem as said above it is due to closure in javascript. Something you should read up on as it causes some interesting issues like the one you are running into. — Bill Blankenship, Apr 24 '14 at 00:23

How to pass a variable into a function defined in the argument of another function in JavaScript?

1 Answers1