Resize marker icon on Google Maps

Question

When I load an image into the property of the marker icon, it is displayed with its original size, which is much larger than it should be.

I want to resize to a smaller size. What is the best way to do this?

the 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

If the size of the original is 100 x 100 and you want to scale it to 50 x 50, use scaleedize instead of 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 2

As mentioned in the comments, this is an updated decision in favor of the Icon object with documentation.

Use Icon Object

 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 deprecated for Icon

Prior to version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. Icon object literal was added in 3.10 and replaces MarkerImage since version 3.11. Icon object literals support the same parameters as MarkerImage, which makes it easy to convert MarkerImage to Icon, removing the constructor, wrapping the previous parameters in {} and adding the names of each parameter.

Philippe's code will now be:

  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

For a beginner like myself, it can be harder to implement one of these answers than if you were within your control to resize the image yourself using an online editor or photo editor such as Photoshop,

A 500x500 image will be larger on the map than a 50x50 image.

No programming required.

Answer 5

Remove the original and the anchor will be a more ordinary picture

  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 6

I had the same problem, but a little different. I already had the icon as an object, as Philippe Boissonne suggests, but I used the SVG image.

What solved this for me was:
Switch from the SVG image to PNG and follow Katherine Nyou, getting an image that is twice as large as what you will use.