Categories
JavaScript Answers

How to resize Google Maps marker icon image with JavaScript?

Spread the love

Sometimes, we want to resize Google Maps marker icon image with JavaScript.

In this article, we’ll look at how to resize Google Maps marker icon image with JavaScript.

How to resize Google Maps marker icon image with JavaScript?

To resize Google Maps marker icon image with JavaScript, we create a marker with the google.maps.Marker constructor.

For instance, we write

const icon = {
  url: "../res/sit_marron.png", 
  scaledSize: new google.maps.Size(50, 50), 
  origin: new google.maps.Point(0, 0), 
  anchor: new google.maps.Point(0, 0), 
};

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

to create the icon object to set the url, scaledSizr, origin and anchor point of the icon.

And then we use the Marker constructor with an object that sets the position of the marker, the map to display it on, and the icon to use.

Conclusion

To resize Google Maps marker icon image with JavaScript, we create a marker with the google.maps.Marker constructor.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *