Redimensionner l'image de l'icône du marqueur Google Maps

Question

Lorsque je charge une image dans la propriété d'icône d'un marqueur, elle s'affiche avec sa taille originale, qui est beaucoup plus grande qu'elle ne devrait l'être.

Je veux redimensionner le standard à une taille plus petite. Quelle est la meilleure façon de procéder ?

Code :

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

Si la taille d'origine est de 100 x 100 et que vous souhaitez la réduire à 50 x 50, utilisez scaledSize au lieu de Size.

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

const marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Answer 2

Comme mentionné dans les commentaires, c'est la solution mise à jour en faveur de l'objet Icon avec documentation.

Utilisez Objet de l'icône

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

Answer 3

MarkerImage a été déprécié pour Icon

Jusqu'à la version 3.10 de l'API JavaScript de Google Maps, les icônes complexes étaient définies comme des objets MarkerImage. L'objet Icon literal a été ajouté en 3.10, et remplace MarkerImage à partir de la version 3.11. Icône prennent en charge les mêmes paramètres que MarkerImage, ce qui vous permet de convertir facilement un objet MarkerImage. de convertir facilement un MarkerImage en une Icône en supprimant le paramètre en supprimant le constructeur, en enveloppant les paramètres précédents dans des {} et en ajoutant le nom de chaque paramètre. de chaque paramètre.

Le code de Phillippe serait maintenant :

 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 4

Supprimer l'origine et l'ancre sera une image plus régulière.

  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 5

Si vous utilisez vue2-google-maps comme moi, le code pour définir la taille ressemble à ceci :

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>