Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I've followed this tutorial to create a custom Google Map. I've included a few other elements such as linking it up to Wordpress and clustering the markers.

It's all working great apart from the info in the info windows on each marker. I just can't seem to change the info within each one. I thought by changing the following lines it would change it but nothing affects it:

var html = "<b>" + name + "</b> <br/>" + address;

This is the working map

Where can I put in my own custom data into the window? Also, if I could style the window on that would be even better.


It seems the clusterer is the problem, mainly this section, how can I take the html content and place it into the info window?

  // Change this depending on the name of your PHP file
  downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");

      var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
      var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);

      var point = new google.maps.LatLng(offsetLat, offsetLng);
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i].getAttribute("name"));
                        infowindow.open(map, marker, html);
                    }
                })(marker, i));
      cluster.push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

Specifically this, it's not putting the html content through the clusterer... at least this is actually changing the data in the window, just need to output the html content without breaking the clusterer:

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i].getAttribute("name"));
                        infowindow.open(map, marker, html);
                    }
                })(marker, i));
      cluster.push(marker);
share|improve this question

1 Answer 1

The bindInfoWindow function creates the closure around the marker specific values for html. When you switched to putting the addListener call directly in the for loop, you lost that closure. You should go back to the way the example does it, by calling the bindInfoWindow function instead, i.e. replace the second code chuck with this:

bindInfoWindow(marker, map, infoWindow, html);
cluster.push(marker);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.