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:

Answer 1

Please be aware that the compiled version (https://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer_compiled.js) is no longer available, as can be seen in this commit:

https://github.com/googlemaps/js-marker-clusterer/commit/c259d330cc2183e6751ff97ec5ade76e749e0188

Answer 2

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 3

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.