Search code examples
javascriptgoogle-mapsgoogle-maps-markersimage-resizing

Resize Google Maps marker icon image


When I load an image into the icon property of a marker it displays with its original size, which is a lot bigger than it should be.

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

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

Solution

  • If the original size is 100 x 100 and you want to scale it to 50 x 50, use scaledSize instead of 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
    });