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

score 394 · Accepted Answer · edited Apr 13 '22 at 16:05

394

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

edited Apr 13 '22 at 16:05

Felix Geenen

2,465
1
28
37

answered Jul 17 '14 at 04:27

Catherine Nyo

3,972
2
13
3

This is how to do it under API v3. – Dean_Wilson Aug 21 '15 at 00:14
2

`scaledSize` instead of `scale`= love – Made in Moon May 20 '17 at 09:02
1

Be sure to twiddle with the anchor points to correctly align the icon to the location. – bluedot Aug 29 '17 at 09:50
1

You don't have to set `anchor` and `origin`, they are optional. `origin` only needs to be used if you using sprite, which I guess in uncommon. And position of `anchor` is by default in the middle of the bottom, because most marker look like that. If you define it to 0,0, then top left corner is the core position. Better to just leave both options away? – Adam Aug 24 '22 at 20:52

Philippe Boissonneault · Answer 2 · 2016-01-29T16:18:39.750

77

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

edited Jan 29 '16 at 16:18

answered Feb 26 '13 at 18:29

Philippe Boissonneault

3,949
3
26
33

12

MarkerImage is deprecated: use the icon object instead ! – Bertaud Jun 01 '13 at 23:26
9

This does not resize the image, but crops it? – Luis A. Florit Apr 09 '14 at 18:36
Use `icon object` and the `scaledSize: new google.maps.Size(h, w)` property on that object – Sverrir Sigmundarson Jan 28 '16 at 17:44
2

@SverrirSigmundarson it should be ```new google.maps.Size(w, h)``` NOT h, w – Ravi Ram Feb 28 '17 at 20:17
@RaviRam [Indeed you're right](https://developers.google.com/maps/documentation/javascript/reference#Size), thank you for this correction. – Sverrir Sigmundarson Mar 01 '17 at 21:11

score 21 · Answer 3 · edited Jan 17 '18 at 16:06

21

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

edited Jan 17 '18 at 16:06

NoAIUser

3,966
6
34
52

answered Aug 14 '13 at 12:46

Jono

3,949
4
28
48

3

I think this does not resize the image, but crops it. – Luis A. Florit Apr 09 '14 at 18:38
10

You want `scaledSize` rather than `size`. – bbodenmiller Apr 24 '14 at 21:20
1

Yeah agree with @bbodenmiller, scaledSize might be the one you are looking for. For my project I use scaledSize and that works for me. var icon = { url: imageName, scaledSize: new google.maps.Size(8, 12) }; – user908645 Apr 16 '15 at 06:07

score 17 · Answer 4 · answered Jan 24 '18 at 11:46

17

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

answered Jan 24 '18 at 11:46

ibyanik

302
1
4
18

This worked for me! If I tried to set the scaledImage parameter inside the Marker code, it would not work. – Dumber_Texan2 Apr 08 '20 at 17:09
2

It works! 2021!!! – AwesomeUserName Sep 24 '21 at 14:27

score 3 · Answer 5 · answered Jun 30 '20 at 07:40

3

If you are using vue2-google-maps like me, the code to set the size looks like this:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>

answered Jun 30 '20 at 07:40

Wolle

421
5
8

score 1 · Answer 6 · answered Jan 11 '19 at 04:30

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.

score 0 · Answer 7 · answered Jul 19 '17 at 19:53

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.

Resize Google Maps marker icon image

7 Answers7

Linked

Related