Generating Map with multiple markers using JSON + PHP + Google Maps API V2

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.

@LawrenceCherone No there are no errors in the consoles. Also, i have already told the problems lies with the callback of the geocoder.getLatLng function. — xmaestro
– xmaestro, Commented Jun 29, 2012 at 12:34

geocodezip · Accepted Answer · 2012-06-29 13:13:42Z

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).

edited Jun 29, 2012 at 13:13

answered Jun 29, 2012 at 12:51

geocodezip

162k14 gold badges228 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xmaestro Over a year ago

Can you please tell me how to function closure on 'i'? I am a bit confused. The code you referred to is exactly what i did.

geocodezip Over a year ago

Here is Mike Williams' explanation of function closure in his google maps API v2 tutorial. You have a loop inside the showAddress function. The example I provided has the loop outside the showAddress function (so it can close on the address).

Collectives™ on Stack Overflow

Generating Map with multiple markers using JSON + PHP + Google Maps API V2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related