Google Maps - Same text appears in info window when using multiple markers

Question

Hi everyone,

I'm having an issue with multiple markers on google maps - I currently have a MySQL database storing info (location info). In php I then extract this info and loop through each postcode to dynamically create the required javascript to place a marker for each place in my database.

This works successfully so I know that I'm passing the correct information to the js function - Now what I'm trying to achieve is adding additional information when the marker is clicked but its showing the same on every marker window.

This is the js I'm using (I initiate an icon at the top but excluded this from the code for now):

function usePointFromPostcode(postcode, callbackFunction, text) {

    localSearch.setSearchCompleteCallback(null, 
     function() {

      if (localSearch.results[0])
      {  
       var resultLat = localSearch.results[0].lat;
       var resultLng = localSearch.results[0].lng;
       var point = new GLatLng(resultLat,resultLng);
       callbackFunction(point, text);
      }else{
       alert("Postcode not found!");
      }
     }); 

    localSearch.execute(postcode + ", UK");
}

function placeMarkerAtPoint(point, html, icon)
{
    var marker = new GMarker(point,{icon: icon});

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

    map.addOverlay(marker);
}

The php code I have is:

$query = "SELECT * FROM hospitalInfo";
$result = mysql_query($query);

if($result) {
    while ($row = mysql_fetch_assoc($result)) {
     $code .= "usePointFromPostcode('".$row['Postcode']."', placeMarkerAtPoint, 
     '".$row['placeName']."');";

    }
}

$code is then echo'ed.

Any advice on why this is occuring would be much appreciated! Thanks !

Answer 1

I don't see a problem with your Google Maps Code. I suggest you try logging the html parameters in placeMarkerAtPoint and the text param to the localSearch callback. Google have a very useful logging API you could use:

GLog Reference

I would add at the begining of the placeMarkerAtPoint function:

GLog.write ("placeMarkerAtPoint - " + html);

and in the localSearch callback:

GLog.write ("SearchCompleteCallback - " + text);

I think the logging for these two callbacks (particularly the second one), will make it obvious where the html is getting lost.

Update: Ok, based on your logging your PHP code is fine. You are generating three calls to usePointFromPostcode.

The problem here is with your google.search.SearchControl callback. I am assuming the search is working correctly and the results array you get back is appropriate for each respective postcode?

If so, then the problem is with the text parameter in the setSearchCompleteCallback. I haven't used the Google AJAX Search stuff, but the problem lies in how these callbacks are fired. It looks like you can get multiple callbacks for a single execute.

Answer 2

I tried this & I also added:


GLog.write("usePointFromPostcode - " + html);

my log gave me this:

10:06:14:789usePointFromPostcode - <h1>Rundig Hospital</h1>
10:06:14:791usePointFromPostcode - <h1>Royal Hospital</h1>
10:06:14:791usePointFromPostcode - <h1>Royal Infirmary Hospital</h1>
10:06:14:792SearchCompleteCallback - <h1>Royal Infirmary Hospital</h1>
10:06:14:792placeMarkerAtPoint - <h1>Royal Infirmary Hospital</h1>
10:06:14:792SearchCompleteCallback - <h1>Royal Infirmary Hospital</h1>
10:06:14:793placeMarkerAtPoint - <h1>Royal Infirmary Hospital</h1>
10:06:14:793SearchCompleteCallback - <h1>Royal Infirmary Hospital</h1>
10:06:14:793placeMarkerAtPoint - <h1>Royal Infirmary Hospital</h1>

So it seems that its calling the first function 3 times and then doing the callback, Seems werid!! Any thoughts?

I also looked at my source code to ensure that php is echo'ing the correct data & it is:

    <script type="text/javascript"> 


        function placePoints()
        {
         usePointFromPostcode('RG20 7GH', placeMarkerAtPoint, '<h1>Rundig Hospital</h1>');
            usePointFromPostcode('WN8 7HY', placeMarkerAtPoint, '<h1>Royal Hospital</h1>');
            usePointFromPostcode('EH12 7TF', placeMarkerAtPoint, '<h1>Royal Infirmary Hospital</h1>');
        }

        addLoadEvent(placePoints);


    </script>

I'm really stuck on what else to try - any suggestions would be much appreciated! Thanks!!

Answer 3

You're re-using the name marker so the last text you place ends up getting attached to all of them. Create an index and name them marker1, marker2, etc. Its easy to do in a php loop.

Answer 4

You may be having a scope/closure problem, similar to the issue discussed here.

Try replacing this code:

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

with this:

marker.bindInfoWindowHtml(html);

If that doesn't work, I'd guess that the closure problem is coming from the setSearchCompleteCallback() function. It's difficult to guess without seeing the actual page.

Answer 5

As you mentioned in your comment, the problem is that you're sending several requests before you get any results, and the value of the marker text changes each time you send the request. I think you could greatly simplify your code by using the GClientGeocoder - unless it's absolutely necessary to use GLocalSearch, which isn't really part of the Maps API. Here's Google's tutorial for the geocoder.

First create the geocoder like this:

var geocoder = new GClientGeocoder();

Next, here's your new usePointFromPostcode() function:

function usePointFromPostcode(postcode, text) {
    geocoder.getLatLng(postcode, function(point) {
        if (!point) {
            //alert('address not found');
        } else {
            var marker = new GMarker(point, {icon: icon});
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(text);
            });
            map.addOverlay(marker);
        }
    });
}

This worked great for me. Try it out and let us know how it goes.

If you need more information about the returned point, like accuracy, use getLocations() instead of getLatLng(). The tutorial explains how it works.