javascript - marcadores - Cambiar el tamaño de la imagen del icono del marcador de Google Maps

icono google maps

Question

Cuando cargo una imagen en la propiedad del icono de un marcador, se muestra con su tamaño original, que es mucho más grande de lo que debería ser.

Quiero cambiar el tamaño del estándar a un tamaño más pequeño. ¿Cuál es la mejor manera de hacer esto?

Código:

function addMyPos(latitude,longitude){
position = new google.maps.LatLng(latitude,longitude)
marker = new google.maps.Marker({
position: position,
map: map,
icon: "../res/sit_marron.png"
});
}

Answer 1

A un principiante como yo sobre el tema puede resultarle más difícil implementar una de estas respuestas que, si está bajo su control, cambiar el tamaño de la imagen usted mismo con un editor en línea o un editor de fotos como Photoshop.

Una imagen de 500x500 aparecerá más grande en el mapa que una imagen de 50x50.

No se requiere programación.

Answer 2

Eliminar origen y ancla será una imagen más común

 var icon = {
url: "image path", // url
scaledSize: new google.maps.Size(50, 50), // size
};
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
icon: icon
});

Answer 3

Si el tamaño original es de 100 x 100 y desea escalarlo a 50 x 50, utilice ScaledSize en lugar de Size.

var icon = {
url: "../res/sit_marron.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: icon
});

Answer 4

MarkerImage ha quedado obsoleto para Icon

Hasta la versión 3.10 de la API JavaScript de Google Maps, los íconos complejos se definían como objetos MarkerImage. El literal del objeto Icon se agregó en 3.10 y reemplaza a MarkerImage de la versión 3.11 en adelante. Los literales de objeto de icono admiten los mismos parámetros que MarkerImage, lo que te permite convertir fácilmente un MarkerImage en un ícono al eliminar el constructor, ajustar los parámetros anteriores en {} ''s y agregar los nombres de cada parámetro.

El código de Phillippe ahora sería:

 var icon = {
url: "../res/sit_marron.png", // url
scaledSize: new google.maps.Size(width, height), // size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(anchor_left, anchor_top) // anchor
};
position = new google.maps.LatLng(latitud,longitud)
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon
});

Answer 5

Como se menciona en los comentarios, esta es la solución actualizada a favor del objeto Icon con documentación.

Usar el objeto Icon

var icon = {
url: "../res/sit_marron.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
posicion = new google.maps.LatLng(latitud,longitud)
marker = new google.maps.Marker({
position: posicion,
map: map,
icon: icon
});