Creating Custom Google Maps API Icons

In the Google Maps API, you can customize markers by setting properties of the GIcon class. This screencast will show you how to create custom images in Adobe Photoshop® and set up your code appropriately.

• Screencast
• Supplementary Materials
• Resources

Screencast

Click on the screenshot below to open the screencast. Watching the screencast requires the Adobe Adobe's Flash® Player plug-in. You can navigate through the screencast by moving the slider or pressing the backwards/forwards buttons.

Supplementary Materials

You can download a zip file that contains the following sample code and files:

HTML files:

• customicon_start.html: The starter code (creates a marker on the map).
• customicon_end.html: The final code (defines all the properties of GIcon).

Photoshop files:

• my_custom_icon.psd
• my_custom_icon_shadow.psd

Icon files:
• my_custom_icon.png
• my_custom_icon_print.gif
• my_custom_icon_printShadow.gif
• my_custom_icon_shadow.png
• my_custom_icon_transparent.png

Resources

The following links should be useful for you in following this screencast or finding out more about custom icons:

• GIcon Reference
• GIcon Documentation & Examples
• Mike Williams' tutorial on Custom Markers
• Google Maps API Group: Post questions here.