MarkerCluster V3 stopped working properly

Question

I am using MarkerCluster_compiled.js from github. But while the logic works, its graphics started failing from yesterday.

The problem seems to be caused by "https://google-maps-utility-library-v3.googlecode.com/svn" returns a 404, and all cluster marker images have dependency on this url. (This google map v3 svn url is still in google's public domain)

Seems to me the impact of this particular "404" is not trivial, as I see people's live sites have been affected. I am surprised this problem could happen to Google.

For example: The marker-clusterer's advanced_example on github.io no longer work (I can't post the link due to my low reputation).

Looking forward to see Google fix the issue or any other suggestion.

Answer 1

As Google moved the source over to GitHub a while back, the new GitHub version can be accessed from RawGit by using the following script url:

https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js

You'll also need to specify the imagePath option when instantiating your MarkerClusterer to access the images from GitHub:

var mc = new MarkerClusterer(map, markers, { 
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' 
});

The following earlier SO post contains more detail regarding the imagePath reference to the cluster images:

Google maps not working in https://

Whilst the above urls (with the cdn prefixes) have no traffic limits or throttling and the files are served via a super fast global CDN, please bear in mind that RawGit is a free hosting service and offers no uptime or support guarantees.

This is covered in more detail in the following SO answer:

Link and execute external JavaScript file hosted on GitHub

This post also covers that, if you're linking to files on GitHub, in production you should consider targeting a specific release tag to ensure you're getting a specific release version of the script.

However, as the custodians of the js-marker-clusterer repository have yet to create any releases, this isn't currently possible.

As a result, you should seriously consider downloading and including the library and its resources directly in your project for production purposes.

Answer 2

Download markerclusterer.js and the images m1.png to m5.png from Github https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images and save them locally, like this:

index.html
markerclusterer.js
images/
- m1.png
- m2.png
- m3.png
- m4.png
- m5.png

Then when using markerclusterer.js, set imagePath to ìmages/m like this:

var mc = new MarkerClusterer(map, makers, {imagePath: 'images/m'});

Why you should use it like described above:

• GitHub is not a CDN.
• Paths could change, like they did before.
• It will work with http and https!
• You don't depend on external resources to keep your service alive.