10+ Google Map Javascript Resources to Kick Start Your Mapping Skill

Written by Kevin Liew on 23 Aug 2011
85,123 Views • Web Development


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 gmap3 jQuery Google Map API 3 jQuery plugingmap3 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 DynamicThis 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.
  • jMapping 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() goMap Google Map API 3 jQuery PlugingoMap 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.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Mats 13 years ago
Thanks for a great round up! Here's another interesting google maps plug in for jquery:
Connie 13 years ago
Here is an impressive choice of free map-icons:

Michelle Lee 12 years ago
Great post. Here’s a geocoding feature that will make your applications smarter and more interactive. Instead of displaying plain text, any address-centric data can be displayed on your site with a live map from Yahoo! or Google. Users will get more accurate information and be engaged in the process http://www.caspio.com/extend/platform-extensions/map-mashup.aspx
Sam Pento 12 years ago
I just tried out this "Google Map Quick Widgets" maps widget from welocally on binpress.com, I thought it was the coolest map widget for jquery I have seen yet. I made this great business directory site with it.
Devanso 11 years ago
Thanks a lot...getting into google maps dev and was wondering how to do some things for the past 2 days...I think I've found my solution in one of the plugins mentioned. Nice article...useful!
Kasia 11 years ago
a good read :) keep the posts coming !