You got an SVG path like M20,20 30,20 30,30 20,30 Z
, which is a 10x10 square whose top left corner is positioned at 20,20
.
You would like that square's top left corner to be positioned at 0,0
.
See here: https://developers.google.com/maps/documentation/javascript/symbols#add_to_marker
Google maps API allows to specify a path as a marker. This allows to do cool stuff like theming of the marker, which is the reason I needed to do this whole thing.
The challenge here is that the exact location of the marker is mapped to the SVG path's 0,0
. So if you have an SVG of a custom pin, like the one attached to this gist, you have to make sure that the pointy part of the pin is located at 0,0
.
And that's what this function does.