Google maps marker clustering for array

StackOverflow https://stackoverflow.com/questions/23588522

Question

I know there are a bunch of questions on this subject already - but I have read many of them but can't seem to get anything working in my particular case. I want to make a map with a bunch of custom markers with info windows showing store locations across Australia (<-- this part i have working)... When zoomed out the markers should group by city with a number shown... also I would like a html list of links that when clicked zoom to an particular marker on the map. Much like the example shown here: https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/speed_test_example.html

Below is my code (at the moment I have just added locations in 2 cities as example, later to have many cities nationwide):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(-25.274398, 133.775136);

        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var mc = new MarkerClusterer(map);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });

    }

    var sites = [
    ['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
    ['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
    ['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
    ['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
    ['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
    ['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
];

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
                icon: sites[5]
            });

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>

So in summary, I need help with getting the clustering working and html links...

Was it helpful?

Solution

The array "sites" was undefined in your code, I wonder why though... but I'm no expert in javascript... If you move it inside your initialize() function, it works correctly.

The declaration of the MarkerClusterer doesn't include any markers, which doesn't make sense at all. Based on the examples in here https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html you can see that you need to first declare your markers, then include them in the declaration of the MarkerClusterer.

Also in your setMarkers() function you declare a local variable "sites", this is dangerous as you also have a global one with the same name. (it's not the case anymore since I moved it within initialize())

Finally, I don't know what you intent to do with the infowindow, right now, nothing is displayed, but if you write infowindow.setContent('Hello Marker'); instead of "this.html", it will work.

You can find a working example of your code here: http://jsfiddle.net/839dV/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top