Question

I’m using the jQuery Google Maps v3 plugin, I want to add the MarkerClusterer with the goMap plugin, however I have this what it was intended to do:

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

$.goMap.ready(function()
{
    var markers = [];
    for (var i in $.goMap.markers)
    {
        var temp = $($.goMap.mapId).data($.goMap.markers[i]);
        markers.push(temp);
    }
    var markerclusterer = new MarkerClusterer($.goMap.map, markers, clustererOpts);
});

When viewing the map (currently has 35 markers) I don’t see anything being taken into effect, except all the markers are being plotted. In Firebug I do not see any errors being logged, so I have no complete idea why this isn’t working with goMap.

Anyone? Not even a simple solution?

EDIT: I can’t put it on jsFiddle, seems to messes up with adding JS resources into jsFiddle.

This the mapMarkers variable:

[{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},{"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},{"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},{"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},{"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},{"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}]

The markers are very close to each other, on the map zoom of 1, even though there’s no marker clusterer taking effect.

Answer 1

[NEWLY EDITED]

The simpliest workaround for this problem is by hack the jquery.gomap-1.3.2.js source code like below:

add a markerCreated property on myOptions variable in the init function

Before

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom
};

After

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom,
  markerCreated:        opts.markerCreated //patched here
};

Change and add method on createMarker function:

Before

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var cmarker = new google.maps.Marker(options);
  if (marker.html) {
  ....
},

After

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var goMap = this; //patched here
  var cmarker = new google.maps.Marker(options);
  if(goMap.opts.markerCreated) goMap.opts.markerCreated(cmarker); //patched here
  if (marker.html) {
  ....
},

And then in your own code change from:

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

to:

$(function() {

    var markerclusterer;
    var markers = [];
    var mapMarkers = [{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},
        {"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},
        {"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},
        {"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},
        {"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},
        {"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}
    ];
    $("#map").goMap({
        markerCreated: function(marker) {
            markers.push(marker);
            //updated solution for slow MarkerClusterer loading
            if(markers.length == mapMarkers.length) {
                new MarkerClusterer($.goMap.map, markers);
            }
            //prev solution
            //if(!markerclusterer) markerclusterer = new MarkerClusterer($.goMap.map, markers);
            //markerclusterer.addMarker(marker);
        },
        markers: mapMarkers
    });
});

Remove the $.goMap.ready part

Please let me now if this hack work/not
Thanks

[EDITED]

I think this because when MarkerCluster is being created it doesn’t passed with proper markers object parameter.
This because your mapMarkers variable need to be geocoded first before it created a marker object, meanwhile in your code you force to create a MarkerCluster before the markers porperly geocoded (return a marker object with position properties)

Believe me when you substitute your mapMarkers variable to objects of marker (I mean with already known positions) then you can see the cluster display properly
try this:

[{ 
    latitude: 40.713094,
    longitude: -74.033904,
    id: 'test1',
    title: 'marker title 1'
},{
    latitude: 40.712638,
    longitude: -74.03429,
    id: 'test2',
    title: 'marker title 2'
}]

[OLD]
Maybe this help:

goMap Markercluster Soluton

Sorry can’t write more simple solution then this 😉

Hint: Try to look the page source