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


141

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 al 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"
  });
}

Respuestas:


317

Si el tamaño original es 100 x 100 y desea escalarlo a 50 x 50, use 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
});

Así es como se hace en API v3.
Dean_Wilson

scaledSizeen lugar de scale= amor
Hecho en la luna

Asegúrese de girar con los puntos de anclaje para alinear correctamente el icono con la ubicación.
bluedot

64

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

Usar objeto de icono

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
 });

12
MarkerImage está en desuso: ¡use el objeto de icono en su lugar!
Bertaud

8
¿Esto no cambia el tamaño de la imagen, sino que la recorta?
Luis A. Florit

Uso icon objecty la scaledSize: new google.maps.Size(h, w)propiedad de ese objeto
Sverrir Sigmundarson

2
@SverrirSigmundarson no debería ser new google.maps.Size(w, h)h, w
Ravi Ram

@RaviRam De hecho, tienes razón , gracias por esta corrección.
Sverrir Sigmundarson

14

MarkerImage ha quedado en desuso para Icon

Hasta la versión 3.10 de la API JavaScript de Google Maps, los iconos complejos se definían como objetos MarkerImage. El literal del objeto Icon se agregó en 3.10 y reemplaza MarkerImage desde la versión 3.11 en adelante. Los literales de objeto de icono admiten los mismos parámetros que MarkerImage, lo que le permite convertir fácilmente una imagen de marcador en un icono eliminando el constructor, envolviendo los parámetros anteriores en {} 's y agregando 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
 });

3
Creo que esto no cambia el tamaño de la imagen, sino que la recorta.
Luis A. Florit

9
Tu quieres en scaledSizelugar de size.
bbodenmiller

Sí, de acuerdo con @bbodenmiller, ScaledSize podría ser el que estás buscando. Para mi proyecto utilizo scaledSize y eso funciona para mí. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645

7

Eliminar origen y ancla será imagen más regular

  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
 });

¡Esto funcionó para mí! Si intentara establecer el parámetro scaledImage dentro del código Marker, no funcionaría.
Dumber_Texan2

1

Un principiante completo como yo en el tema puede encontrar 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.


1

Así que tuve este mismo problema, pero un poco diferente. Ya tenía el ícono como un objeto como sugiere Philippe Boissonneault , pero estaba usando una imagen SVG.

Lo que lo resolvió para mí fue:
cambiar de una imagen SVG a una PNG y seguir a Catherine Nyo para obtener una imagen que sea el doble del tamaño de lo que usará.


0

Si está utilizando vue2-google-maps como yo, el código para establecer el tamaño se ve así:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.