google maps api 3 - geolocalizacion - Google Maps Api v3, icono del clúster personalizado

markerclusterer

Question

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

Answer 1

Debe utilizar el parámetro de estilos al inicializar el objeto MarkerClusterer; el código siguiente muestra los estilos predeterminados, por lo que si desea volver a colorear uno de los iconos, simplemente cambie la URL relevante 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

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

También puede considerar descargar la 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 3

Un atajo está anulando 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 4

Aquí hay 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);