Javascript Google Maps Marker Clustering with InfoWindows - Possible?

Question

I have worked out how to make a google map using Marker Clusterer and it works just the way I want.

So, I next moved on to try and work out how to add InfoWindows to markers but I have got myself in a muddle.

What ever I try, the infowindow information is always the details of the last item in the markers.txt file. ie "Bathtub - 122 Byron Road, CHELMSFORD, CM2 6HJ"

I think it's to do with creating the markers inside the loop. But I cannot work out how else to do it. I was following this post which didn't say that it didn't work.

InfoWindow on Marker using MarkerClusterer

I have put up a demo of my work to date so you can see what I mean here:

http://googlemap.azurewebsites.net/2clustermapwithinfowindows.html

and this is my code:

any help would be very much appreciated!

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer v3 Example</title>

<style type="text/css">

    #map {
        width: 100%;
        height: 100%;
    }
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/markers.txt"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<script type="text/javascript">

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

    function initialize() {
        var center = new google.maps.LatLng(54,-2);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var stack = [];
        var markers = [];
        for (var i = 0; i < data.count; i++) {
            var dataPhoto = data.clustermarker[i];
            // obtain the attribues of each marker
            var lat = dataPhoto.latitude;
            var lng = dataPhoto.longitude;
            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("<div id='pano' style='width: 400px; height: 400px;'></div><div>" + dataPhoto.businessname + "</div>" + "<div>" + dataPhoto.fulladdress + "</div>");
                    infowindow.open(map, marker);
                }
            })(marker, i));
            stack.push(marker);
        }
        var mc = new MarkerClusterer(map, stack);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
</body>
</html>

Answer 1

I'm not sure, but I think it's because you use data from dataPhoto in your event listener (which will have the value of the last element when your event is fired).

You can try to store your additional data in your marker and reuse it in your listener like this :

var stack = [];
var markers = [];
for (var i = 0; i < data.count; i++) {
    var dataPhoto = data.clustermarker[i];
    // obtain the attribues of each marker
    var lat = dataPhoto.latitude;
    var lng = dataPhoto.longitude;
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: "This is a marker",
        businessname: dataPhoto.businessname,
        fulladdress: dataPhoto.fulladdress
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent("<div id='pano' style='width: 400px; height: 400px;'></div><div>" + marker.businessname + "</div>" + "<div>" + marker.fulladdress + "</div>");
            infowindow.open(map, marker);
        }
    })(marker, i));
    stack.push(marker);
}

Javascript Google Maps Marker Clustering with InfoWindows - Possible?

Question

1 answers

solution1
4 ACCPTED 2013-12-04 15:24:14

Javascript Google Maps Marker Clustering with InfoWindows - Possible?

Question

1 answers

solution1 4 ACCPTED 2013-12-04 15:24:14

solution1
4 ACCPTED 2013-12-04 15:24:14