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

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

Je veux redimensionner à la norme à 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"
  });
}

Si le format d'origine est de 100 x 100 et que vous souhaitez le mettre à l'échelle à 50 x 50, utilisez scaledSize au lieu 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
});

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

Utiliser l' objet 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
 });

MarkerImage est obsolète 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. Le littéral d'objet Icon a été ajouté dans la version 3.10 et remplace MarkerImage à partir de la version 3.11. Les littéraux d'objets Icon prennent en charge les mêmes paramètres que MarkerImage, ce qui vous permet de convertir facilement une MarkerImage en Icon en supprimant le constructeur, en enveloppant les paramètres précédents dans {} et en ajoutant les noms 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
 });

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

Un débutant complet comme moi sur le sujet peut avoir plus de mal à mettre en œuvre l'une de ces réponses que, si vous le contrôlez, de redimensionner l'image vous-même avec un éditeur en ligne ou un éditeur de photos comme Photoshop.

Une image 500x500 apparaîtra plus grande sur la carte qu'une image 50x50.

Aucune programmation requise.

Donc j'ai juste eu ce même problème, mais un peu différent. J'avais déjà l'icône comme objet comme le suggère Philippe Boissonneault , mais j'utilisais une image SVG.

Ce qui a résolu le problème pour moi, c'est:
passer d'une image SVG à une image PNG et suivre Catherine Nyo pour avoir une image double de celle que vous utiliserez.

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