Changing data in the info window with Google Map markers

Question

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?

function load() {
  var cluster = [];
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(52.375599, -3.471680),
    zoom: 8,
    mapTypeId: 'roadmap'
  });
  var infowindow = new google.maps.InfoWindow();
  var min = .999999;
  var max = 1.000002;

  // 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);
                        infowindow.setContent(html); infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }
    var mc = new MarkerClusterer(map,cluster);
  });
}

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

---

The closest I have it so far is this but it shows the same info for every marker. It's showing the html content:

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

Answer 1

i had a similar problem, i figure this out, to change the content in marker infowindow

    var marker = new MarkerWithLabel({
        id: "costume_ID",/*<---this is the start of the trick*/
        position: new google.maps.LatLng(lat,lon),
        icon: "../images/icon-bla.png",
        map: map,
        title: 'bla',
        labelContent: 'bla,bla,
        labelClass: "labels", 
        labelStyle: {opacity: 1.0}
    })
    google.maps.event.addListener(marker, 'click', (function() {
        return function(){
        infowindow.setContent(infor(this.id));/*<--- here is the trick*/
        infowindow.open(map, this);
        map.setCenter(this.getPosition());
    }});

and than set the function that will output whatever you whant, if you have the info in variables.

    function infor(im){
        return "<div><b>INFOWINDOW</b><br>Date: "+var[im].date+"<br>Sync:  "+var[im].sync+"...bla,bla,bla</div>";
    }/*THIS FUNCTION RETURN THE STING TO SHOW ION THE INFOWINDOW*/

Answer 2

The issue is with your closure. The for loop isn't handling your scope correctly. Extract all the code from inside the for loop into a separate function and the closure should work.

Answer 3

Can't believe I didn't think of this sooner!!

It just a case of building the string in the listener.

  // 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 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 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() {
                        var name = markers[i].getAttribute("name");
                        var address = markers[i].getAttribute("address");
                        var html = "<b>" + name + "</b> <br/>" + address;
                        infowindow.setContent(html);
                        infowindow.open(map, marker, html);
                        // infowindow.setContent(html);
                        // infowindow.open(map, marker);
                    }
                })(marker, i));
      cluster.push(marker);
    }

Answer 4

If I'm reading it correctly. You are trying to set content 'after' setting the marker.

This should be the other way around. Move the piece where you set the html to before you push it to the cluster.

---

edit:

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 infowindow = new google.maps.InfoWindow({content: "<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));
  google.maps.event.addListener(marker, 'click',  function(marker, i){infowindow.open(map,marker);})(marker, i);

  cluster.push(marker);
}

Not sure about the (marker, i) pieces. I assume they are used by the marker manager to keep trakc of what's what. Those two changes (I commented out your lines and added one below) seem to be the next logical step.