Google Map is one of my favorite tools to search for direction because of its speed and accuracy. Nowadays, we always receive request from clients from basic implementation (integrate Google Map into contact section) to fairly complicated implementation (Store location javascript with distance calculation). All of these will involve certain level of Javascript knowledge and understanding of Google Map API.

Google overhauled its Google Map API completely around year 2009, and the latest version is V3. Unfortunately, they are a lot of expired articles and information (old api) floating around in the Internet, but don’t worry, I have collected some latest Google Map API resources here – plugins, tutorials and tools.



gmap3 is a jquery plugin which allows many manipulation of the google map API version 3. It supports the latest Google map API and come with heaps of functions. Most importanly, it has a well-documented API.

Google Map Static to Dynamic

Google Map Static to Dynamic

This is a simple jQuery enhancement for static Google maps. It takes your static maps and dynamically creates the JavaScript version, using the settings in the src attribute. By default the plugin only implements a subset of the entire static and dynamic functionality, but covers common areas such as zoom, maptype and markers. However, the plugin allows your easily override any setting to create a more complex dynamic map.


jQuery plugin for creating Google Maps from semantic markup. This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.



goMap is another feature rich google map plugin. It has a section called solutions and examples that shows all the possible setting you can do with it.


Tutorial from Gabriel Svennerberg

I found a list of tutorials from Gabriel Svennerberg website. It comes with 5 series and covers most of the basic knowledge you need to know about the Google API 3.

Other useful tutorials

Useful tools

I have these two tools that helped me before in my previous project.

  • Styled Maps: This tool is extremely useful to create a customized Google Map interface. For example, you can change the saturation, lightness of street road on Google Map.
  • Infobox.js: InfoBox extends the Google Maps JavaScript API V3 OverlayView class. An InfoBox behaves like a google.maps.InfoWindow, but it supports several additional properties for advanced styling. An InfoBox can also be used as a map label.

Leave a comment

Leave a Reply