Question

I am using Google Maps API V2 (I know, but i am editing a current code so have to work with V2). All of my markers are pointing to the right place but there is only one problem that has brought me close to pulling my hair.

Problem is that only one all the markers are displaying correctly, but the info windows have only one content. i.e. Info windows are not being updated. They pop up right but they have same info in all of them.

I have seen this issue on some other forums and tried the solutions as well but to no avail.

Following is the code for fetching the json encoded PHP string from my php script and then looping it over for displaying the markers on the google map.

function showAddress(address) {

var response=$.ajax({
      type: "POST",
      url: "<?php echo WEBROOT; ?>/index/ajaxMaps",
      data: {address : escape(address)},
      cache: false,
      async:false,
      dataType: "json",
      success: function (html) {           

          for(i in html){

              if (geocoder) {
                  geocoder.getLatLng(
                    unescape(html[i].businessAddress),
                    function(point) {
                      if(!point) {

                        //alert(address + " not found");

                      } else {

                        map.setCenter(point, 11);

                          string='<div style="height:100px; background:green; color:white; padding:5px; border-radius:0.5em; width:auto"><strong>Company name : </strong>'+ html[i].businessName;
                          string+='<br/><strong>Adress : </strong>'+ html[i].businessAddress;
                          string+='<br/><strong>Website : </strong>'+'<a style="color:white !important" href="'+html[i].businessWebsite+'" >'+'Visit our website'+'</a></div>';

                        var marker = createMarker(point, string);

                        map.addOverlay(marker);

                        //map.addMapType(G_PHYSICAL_MAP);

                        map.addControl(new GLargeMapControl());

                        // As this is user-generated content, we display it as
                        // text rather than HTML to reduce XSS vulnerabilities.

                        marker.openInfoWindowHtml(string);

                        //$('.map_enlarged').trigger('click');
                      }
                    }
                  );
                }

            }           

      }

    });


 $('.map_enlarged').trigger('click');

}

Now the function for adding marker:

function createMarker(point,html) {

    // Create our "tiny" marker icon
   var blueIcon = new GIcon(G_DEFAULT_ICON);
   blueIcon.image = "<?php echo WEBROOT; ?>images/marker.png";

    // Set up our GMarkerOptions object
    markerOptions = { icon:blueIcon };

    var marker = new GMarker(point,markerOptions);

    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);

  });

  return marker;
}

I know that the variable names ‘string‘ is not being updated. But i don’t see the reason why. I have traced it back to the loop but see no reason why it should not update.

Please remember i have digged enough for most of the above code to be alright and point out the mistake in my code if you can. Providing other links might not be any use because i might have seen them already.

I will be grateful for the solution.

Answer 1

You need another function closure on “i” (that closes on the input parameters to the geocoder).

This example solves that problem, but not the query limit problem (you really shouldn’t geocode large numbers of addresses on the fly, geocode them offline and store the resulting coordinates).