Change marker size in Google maps V3

Question

I am using this explanation of how to color a google maps marker by setting the icon using a MarkerImage  and the coloring works well   But I can t make the scaledSize argument change the size of the marker       var pinColor    FFFF00       var pinIcon   new google maps MarkerImage           http   chart apis google com chart chst d map pin letter amp chld  E2 80 A2     pinColor          new google maps Size 21  34           new google maps Point 0 0           new google maps Point 10  34           new google maps Size 2  4        marker setIcon pinIcon     What is the correct use of the scaledSize argument to change the marker size   For example  how can I double the marker size

User · Answer

The size arguments are in pixels   So  to double your example s marker size the fifth argument to the MarkerImage constructor would be   new google maps Size 42 68    I find it easiest to let the map API figure out the other arguments  unless I need something other than the bottom center of the image as the anchor   In your case you could do   var pinIcon   new google maps MarkerImage       http   chart apis google com chart chst d map pin letter amp chld  E2 80 A2     pinColor      null     size is determined at runtime        null     origin is 0 0        null     anchor is bottom center of the scaled image        new google maps Size 42  68

User · Answer

This answer expounds on John Black s helpful answer  so I will repeat some of his answer content in my answer   The easiest way to resize a marker seems to be leaving argument 2  3  and 4 null and scaling the size in argument 5   var pinIcon   new google maps MarkerImage       http   chart apis google com chart chst d map pin letter amp chld  E2 80 A2 FFFF00       null     size is determined at runtime        null     origin is 0 0        null     anchor is bottom center of the scaled image        new google maps Size 42  68         As an aside  this answer to a similar question asserts that defining marker size in the 2nd argument is better than scaling in the 5th argument   I don t know if this is true   Leaving arguments 2-4 null works great for the default google pin image  but you must set an anchor explicitly for the default google pin shadow image  or it will look like this     The bottom center of the pin image happens to be collocated with the tip of the pin when you view the graphic on the map   This is important  because the marker s position property  marker s LatLng position on the map  will automatically be collocated with the visual tip of the pin when you leave the anchor  4th argument  null   In other words  leaving the anchor null ensures the tip points where it is supposed to point   However  the tip of the shadow is not located at the bottom center   So you need to set the 4th argument explicitly to offset the tip of the pin shadow so the shadow s tip will be colocated with the pin image s tip     By experimenting I found the tip of the shadow should be set like this  x is 1 3 of size and y is 100  of size   var pinShadow   new google maps MarkerImage       http   chart apis google com chart chst d map pin shadow       null      null         Offset x axis 33  of overall size  Offset y axis 100  of overall size        new google maps Point 40  110        new google maps Size 120  110       to give this

[google-maps-api-3] Change marker size in Google maps V3

Examples related to google-maps-api-3

Examples related to google-maps-markers