Google Maps Api v3, icono del clúster personalizado

Question

¿cómo puedo cambiar el icono del clúster? Me gustaría tener el mismo ícono, con algún otro color que no sea azul.

Answer 1

Es necesario utilizar el parámetro estilos al inicializar objeto MarkerClusterer - el código de abajo muestra los estilos predeterminados así que si quieres recolour uno de los iconos simplemente cambiar 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: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png", 
width: 56 
}, 
{ 
height: 66, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png", 
width: 66 
}, 
{ 
height: 78, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png", 
width: 78 
}, 
{ 
height: 90, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png", 
width: 90 
}]} 

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

Answer 2

Estos los íconos ya no están en los servidores de Google.

Answer 3

Google cambió su repositorio. El último clúster de repositorio 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 el código fuente y dar un enlace desde su ruta local. De esta forma, tendrá más control sobre los recursos que su aplicación necesita.

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 
}]} 

Answer 4

Un acceso directo es reemplazar la ruta de la imagen como esta:

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

Answer 5

aquí son fotos originales

markerClusterOptions = {styles: [{ 
    height: 53, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png", 
    width: 53 
    }, 
    { 
    height: 56, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png", 
    width: 56 
    }, 
    { 
    height: 66, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m3.png", 
    width: 66 
    }, 
    { 
    height: 78, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m4.png", 
    width: 78 
    }, 
    { 
    height: 90, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m5.png, 
    width: 90 
    }]} 
    markerCluster = new MarkerClusterer(map, markers,markerClusterOptions);