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

3 minutos de lectura

avatar de usuario
Golan_trevize

Cuando cargo una imagen en la propiedad de 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"
  });
}

avatar de usuario
Felipe Boissonneault

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

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

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

    – Bertaud

    1 de junio de 2013 a las 23:26

  • ¿Esto no cambia el tamaño de la imagen, sino que la recorta?

    – Luis A. Florit

    09/04/2014 a las 18:36


  • Usar icon object y el scaledSize: new google.maps.Size(h, w) propiedad sobre ese objeto

    – Sverrir Sigmundarson

    28 de enero de 2016 a las 17:44

  • @SverrirSigmundarson debería ser new google.maps.Size(w, h) NO h, w

    – Ravi Ram

    28 de febrero de 2017 a las 20:17

  • @RaviRam De hecho tienes razóngracias por esta corrección.

    – Sverrir Sigmundarson

    1 de marzo de 2017 a las 21:11

Eliminar el origen y el ancla será una 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
 });

  • Creo que esto no cambia el tamaño de la imagen, sino que la recorta.

    – Luis A. Florit

    09/04/2014 a las 18:38

  • Usted quiere scaledSize en vez de size.

    – bbodenmiller

    24/04/2014 a las 21:20

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

    – usuario908645

    16 de abril de 2015 a las 6:07

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 },
  }"
>

avatar de usuario
puente

Así que acabo de tener este mismo problema, pero un poco diferente. Ya tenia el icono como objeto como Felipe Boissonneault sugiere, pero estaba usando una imagen SVG.

Lo que me resolvió fue:
Cambiar de una imagen SVG a PNG y siguientes catherine nyo en tener una imagen que sea el doble del tamaño de la que usarás.

avatar de usuario
osoacuda13

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, cambia el tamaño de la imagen tú mismo con un editor en línea o un editor de fotos como Photoshop.

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

No requiere programación.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad