Question

I have been trying to get Markers to Cluster on a Google map for a few days now and I’m lost on how to implement the code

I have this map ->
https://maps.google.com/maps/ms?msid=211137438455901265530.0004cbb2cd7859b1b6c75&msa=0&ll=7.710992,-2.8125&spn=137.343849,307.96875

embedded on this website -> projectevomap.yolasite.com/

and want to add clusters like on this map ->
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

this is the source code for that page ->

view-source:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

Basically, I could do with some guidance as to how I take the existing code and change it so that it displays my map, with clusters, on my site. I would have thought that it is simply by changing a small section in the source code to an address which directs it to my map rather than the example one (?) but I may be wrong.

Answer 1

So all you’re doing at the moment is embedding a Google Map into your web page. Instead what you need to do is use the Google Maps API to add the Google Map directly to your page instead, i.e. not using your customised map. You then have to add all the markers you need, to include the markerclusterer JS file, and to initialise the markerClusterer.

Like so in fact!

 <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

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

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>