At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.
I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. If you are taking your first steps within Google Maps, I suggest you start there.
Before you install any of these plugins you may want to firstly download the latest version of jQuery, and secondly you had better grab your Google Map API Key here: Sign Up for the Google Maps API.
gMap – Google Maps Plugin
gMap is a very flexible, highly customizable and lightweight (only 2KB) jQuery plugin that helps you embed Google Maps into your website. It can be customized in many different ways, all you need to do is to pass a JSON object to the GMap() function, click here for a complete list of properties that can be passed.
Google Maps jQuery Plugin
The Google Maps jQuery Plugin takes away a lot of the pain from working with the Google Map Api (which can be pretty indepth for all developer levels). It allows you to embed Google Maps on your web site with ease and there are also certains portions of the Map that can be controlled via CSS (div container, info window), so that the map will sit perfectly within your web design.
Mapbox – the jQuery Map
The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from pan and zoom functions.
Mapbox likes to think of its self as a basic plugin, yes it is easy to use, but with a wide array of advanced options, here are a list of all the settings and their defaults:
jQuery GPS
jQuery GPS is a jQuery plugin for people that want to add Google maps to their website, but don’t want their website to be bogged down with the features they don’t require.
All you have to do is add inputs for addresses by simply adding default or custom ID’s. You can even use any element to trigger the event, so it doesn’t need to be embedded inside a form.
With jQuery GPS you have the option to select the position/place on the map upon first load, and to open a toolip or image on that starting location.
jMapping – for creating Google Maps from semantic markup
This plugin is designed for quick Google Map implemention with a list of the locations that are specified within the HTML It allows for as much graceful degradation as possible by having as much semantic HTML as it allows.
The plugin expects the HTML for the locations to be grouped under a common element and expects the necessary metadata to be on the location element. This way the HTML semantically reflects all of those parts and information are associated with the specific location or place.
Googlemap jQuery Plugin by Dylan Verheul
This plugins makes it easy to put a Google Map on your page. Look at the source code of this page if you want to know how to use the plugin. Markers can be provided by a jQuery object (containing elements in the geo microformat) or an array of objects that provide lat, lng and txt for the popup (txt being optional).
imGoogleMaps – Multiple Addresses
This is a much simpler plugin than all the rest on this page, it has been developed to create a simpler implementation with minimal and basic options. When you think about it, in most situations all you will want from a map is for an end-user to be able to view the owner’s address and be able to map directions to that address, this plugin fits that bill.
This plugins map interface is similar to what you would see on Google Maps (auto mode), while also giving the developer the ability to style their own interface (manual mode).
jMaps Framework
The JMaps Framework provides a simple yet powerful API for Google’s mapping services, that offers simple jQuery methods to do functions such as: Geocode and reverse any valid address in the world via Google’s geocoding API; Search for directions to and from any location; Add and remove Markers; Add and remove polygons and polylines; Add and remove graphic layers on the map; Add and remove Google adsense layers; Add and remove Traffic layers; Get information back such as map center, map size, map type, etc.
jQuery-PlacePicker
jQuery-PlacePicker is a geocoding jQuery UI widget with support for Google Maps API v3 (and framework ready for others) that allow users to search for and select locations.
jQmaps
jQmaps is a very easy to use and popular plugin for Google Maps, that can add custom points, expandible ballons and hotspots links.
It does not offer any docs nor does it have any working demos. If you feel comfortable using it, go for it, if not try one of the plugins above.
jQuery and Google Maps Tutorial: The Basics
If you have never worked with the Google Map API before it can all seem daunting. What you need is a step-by-step guide that will cover the basics and give you a better understanding of everything that is going on, and that is what this tutorial covers.
AJAX Storing and Retrieving Points – Tutorial
Taking things a step further from the previous article, in this tutorial you will learn how to store and retrieve points with using AJAX and a server-side language. This tutorial will use PHP/MySQL on the server, but it is basic enough that re-writing in another language should not be difficult.