Google Map custom markers made easy. Just upload an image and this page will create the shadow and do the rest

Google Map Custom Marker Maker

Google Maps JavaScript API Early V3 compatible

This custom marker for Google Maps API v3 consists of 2 separate images (the main icon image and a shadow) and a clickable area defined by an array of x,y pixel coordinates

The images
The main foreground image image.png

The main foreground image. 24-bit PNG image with alpha transparency

The shadow image shadow.png

The shadow image. 24-bit PNG image with alpha transparency

Google Map shadow images should generally be at a 45 degree angle (upward and to the right) from the main image and the bottom left corner of the shadow image should align with the bottom-left corner of the icon image.

The clickable area
The clickable area x,y coordinates

This orange overlay visually represents the marker shape used in determining the marker's clickable region. Defined by an array of integers that specify the x,y pixel position of the shape relative to the top-left corner of the marker image.

coord: [27,0,30,1,32,2,3 ..etc.. ]
shape: 'poly'

Create your own custom marker with shadow

To create your own custom marker, simply upload an image. A zip file containing the 2 separate images (the main foreground image and the google map shadow) and some sample code (including the image map area coordinates) is created and made available for download.


If you're feeling generous, consider a small gift. Any and all donations are very gratefully received. Many thanks!

Some further reading

Google Maps API Reference Documentation

Google Maps API Example Of Complex Icons