Resize Google Maps marker icon image

Question

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

User · Answer

A complete beginner like myself to the topic may find it harder to implement one of these answers than, if within your control, to resize the image yourself with an online editor or a photo editor like Photoshop.

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

No programming required.

User · Answer

So I just had this same issue  but a little different  I already had the icon as an object as Philippe Boissonneault suggests  but I was using an SVG image    What solved it for me was   Switch from an SVG image to a PNG and following Catherine Nyo on having an image that is double the size of what you will use

User · Answer

MarkerImage has been deprecated for Icon     Until version 3 10 of the Google Maps JavaScript API  complex icons   were defined as MarkerImage objects  The Icon object literal was added   in 3 10  and replaces MarkerImage from version 3 11 onwards  Icon   object literals support the same parameters as MarkerImage  allowing   you to easily convert a MarkerImage to an Icon by removing the   constructor  wrapping the previous parameters in    s  and adding the   names of each parameter    Phillippe s code would 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

User · Answer

If you are using vue2-google-maps like me  the code to set the size looks like this   lt gmap-marker         icon  quot              anchor    x  iconSize  y  iconSize        scaledSize    height  iconSize  width  iconSize        quot   gt

User · Answer

If the original size is 100 x 100 and you want to scale it to 50 x 50  use scaledSize 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

User · Answer

Delete origin and anchor will be more regular 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

User · Answer

As mentionned in comments  this is the updated solution in favor of 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

[javascript] Resize Google Maps marker icon image

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-markers

Examples related to image-resizing