Google Maps API imagePath local image not working

Question

I have used Google Maps Clustering and its working as per my expectations.

Howerver I am facing one strange issue in MarkerClusterer - imagePath . When I set this..

imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',

Its working fine. However when I do this..

var imgpath = '<?= SITE_ROOT_IMAGE_DEFAULT ; ?>m3.png';


imagePath: imgpath,

And alerting it giving me my correct relative path, /var/www/html/my-app/webroot/img/m3.png where I have downloaded this image. But its not working.

I have also tried to add via http.

imagePath: 'http://localhost/my-app/img/m3.png',

I am able to see my image but its not working as well.

FYI , I have also downloaded my markerclusterer.js library in my local server and requesting it from my local only. And I am using Cakephp 3.x folder structure.

I have also tried with different ways like..

imagePath: "../img/m", But its not working either.

Can someone guide what I am doing wrong here ? Why my imagePath is not being taken ?

Answer 1

Reading the documentation, it says: To use your own custom cluster images just name your images m[1-5].png or set the imagePath option to the location and name of your images like this: imagePath: 'customImages/cat' for images cat1.png to cat5.png.

You should use a relative path to the file where you declare this path.

Here is an example folder structure:

- cluster_images
    - m1.png
    - m2.png
    - m3.png
    - m4.png
    - m5.png
- main.js

If you declare imagePath in the file main.js with the above folder structure, then it should be:

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'cluster_images/m'});

Edit:

If you want to style each image separately and define your images sizes then you should use the styles parameter and declare each cluster icon separately.

mcOptions = {
  styles: [{
      height: 53,
      url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m1.png",
      width: 53
    },
    {
      height: 56,
      url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m2.png",
      width: 56
    },
    {
      height: 66,
      url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m3.png",
      width: 66
    },
    {
      height: 78,
      url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m4.png",
      width: 78
    },
    {
      height: 90,
      url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m5.png",
      width: 90
    }
  ]
}

//init clusterer with your options
var markerCluster = new MarkerClusterer(map, markers, mcOptions);

The above code uses the default images. Replace the URLs again with the relative path to each image and update the sizes to avoid image stretching.