InfoWindow on Marker using MarkerClusterer

Question

This is my html code. I\'ve try anything to add an infowindow on the markers but it don\'t wanna work. My data is loading from the \"Alle_Ortswahlen.page1.xml\" file. Do an

Answer 1

Before the for cycle, make an empty infowindow object.

var infowindow = new google.maps.InfoWindow();

Than in the for cycle, after the marker, add an event listener, like this:

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent("You might put some content here from your XML");
                    infowindow.open(map, marker);
                }
            })(marker, i));

There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:

Mozilla Dev Center: Working with Closures

So, your code should look something like this:

google.load('maps', '3', {
            other_params: 'sensor=false'
        });

        google.setOnLoadCallback(initialize);

        function initialize() {

            var stack = [];

            var center = new google.maps.LatLng(48.136, 11.586);
            var options = {
                'zoom': 5,
                'center': center,
                'mapTypeId': google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);
            var infowindow = new google.maps.InfoWindow();
            GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
                var xmlDoc = GXml.parse(doc);
                var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
                for (var i = 0; i < markers.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(markers[i].getAttribute("Field4"));
                    var lng = parseFloat(markers[i].getAttribute("Field6"));
                    var marker = new google.maps.Marker({
                        position : new google.maps.LatLng(lat, lng),
                        map: map,
                        title:"This is a marker"
                    });     
                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent("You might put some content here from your XML");
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                    stack.push(marker);
                }
                var mc = new MarkerClusterer(map,stack);
            });
        }

Answer 2

So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.

GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
    var xmlDoc = GXml.parse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
    // just create one infowindow without any content in it
    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("Field4"));
      var lng = parseFloat(markers[i].getAttribute("Field6"));
      var marker = new google.maps.Marker({
            position : new google.maps.LatLng(lat, lng),
            map: map,
            title:"This is a marker"
        });     
        // add an event listener for this marker
        google.maps.event.addListener(marker , 'click', function() {
        // assuming you have some content in a field called Field123
                infowindow.setContent(markers[i].getAttribute("Field123"));
                infowindow.open(map, this);
        });
      stack.push(marker);
    }
    var mc = new MarkerClusterer(map,stack);
  });