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

Answer 1

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.

Answer 2

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 3

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 4

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.