Google Maps Api v3, icono de clúster personalizado

Solución:

Debe usar el parámetro de estilos al inicializar el objeto MarkerClusterer: el código a continuación muestra los estilos predeterminados, por lo que si desea volver a colorear uno de los íconos, simplemente cambie la URL correspondiente a su imagen …

//set style options for marker clusters (these are the default styles)
mcOptions = {styles: [{
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/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 mc = new MarkerClusterer(map, markers, mcOptions);

Google cambió su repositorio. El último repositorio de clúster es: https://github.com/googlemaps/js-marker-clusterer imágenes: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

También puede considerar descargar la fuente y proporcionar un enlace desde su ruta local. De esta manera, tendrá más control de los recursos que necesita su aplicación.

local_path "/pucblic/"
mcOptions = {styles: [{
height: 53,
url: local_path+"m1.png",
width: 53
},
{
height: 56,
url: local_path+"m2.png",
width: 56
},
{
height: 66,
url: local_path+"m3.png",
width: 66
},
{
height: 78,
url: local_path+"m4.png",
width: 78
},
{
height: 90,
url:  local_path+"m5.png",
width: 90
}]}

Un atajo está anulando la ruta de la imagen de esta manera:

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 
    "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";

---

---

Utiliza Nuestro Buscador