Google Maps is a very helpful tool to help us find businesses and other points of interest that we want to know about. Since its arrival, businesses have been integrating this tool on their websites to help people where to find them. Google Maps used to be a simple map although it requires a complex process to have it integrated on a website. Nowadays however, it is necessary that Google maps are attractive aside from its being informative to the audience. jQuery has taken this interactivity of websites to another level while making the process required in its preparation easier. With easy to use and install jQuery Google Maps plugins, we can now create simple, and attractive maps depending on our needs.
Useful jQuery Google Maps Plugins, Tutorials and Resources
1. jQuery Plugins for Google Maps by Dylan Verheul
If you want to put a Google Map on your web page fast and easy, then plugins are what you need. you just have to secure a valid Google Maps API key from http://www.google.com/apis/maps/ and look at the source code of its 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).
2. 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 features they don’t need. Jquery GPS is a lightweight and simple solution to all your Google Map needs. Add inputs for addresses by simply adding default or custom ID’s. You can use any element to trigger the event! So it doesn’t need to be embedded inside a form. The default ID’s make it easy to create an application that will give directions and a highlighted map right on your website! jQuery GPS also has the ability for you to select the place the map shows when it first loads, and to open a toolip and load a graphic image on that starting location.
3. gMap jQuery Google Maps by Cedric Kastner
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable. It has tiny line of code is being used to embed the map on your web page. There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3.
4. jMapping by Brian Landau
This jQuery plugin for creating Google Maps from semantic markup, 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. The plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible. The plugin expect the HTML for the locations to be grouped under a common element. Additionally, it expects the links and Map Info Window content to be grouped under the location elements. It also expects the necessary metadata to be on the location element. This way the HTML semantically reflects that all of those parts and information are associated with the specific location or place.
5. Mapbox: Zoomable jQuery Map Plugin
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 being able to zoom in and pan to get a better view. By default, the map will now zoom to the cursor position when the mousewheel is used. This is an intuitive means by which a user may explore different areas of the map.
6. gmap3
One of the finest Google Maps jQuery Plugin around is gMap3. It makes use of Google Map API version 3 to create maps with advanced features integrated on it. Google has been working on maps that users can easily add on their websites but nevertheless there are advanced features which are not easy to apply. With gMap3 you can manipulate your Google map version 3, in more ways unlike other Google Maps plugins.
7. gMaps: Google Maps jQuery Plugin
The bMap jQuery plugin allows you to quickly and easily add mapping to your website. It has been designed from the beginning to handle lots of markers, lots of layers, and custom marker icons. The plugin can manage a sidebar for you, one with a list of markers, one with a list of layers. The sidebars can be styled with CSS. The internal Google object is exposed, so you can continue to use all of the power of the Google Maps API. You can also access the internals of the bMap object. The newest version of bMap is designed to work with the latest version of the Google Mapis API V3. This means you don’t need an API key to have a map on your site, and you can make mobile applications even easier.
8. goMap jQuery Google Maps Plugin
goMap is jQuery v1.5 plugin using Google Maps v3. With its 1.3.1 version, you can have several maps in one page, show or hide markers by group and many more.
9. MobilyMap
MobilyMap is a jQuery Google Maps like plugin (7KB) that can create a Google Maps-like, draggable interface from any image. It features markers, displays HTML content when markers are clicked, remembers last position of the map (cookies), displays caption of the map and many more.
Useful jQuery Google Maps Tutorials
10. jQuery Google Maps Tutorial: #1 Basics by Marc Grabanski
In this tutorial, you will walk through the steps on how to get started using jQuery inside the Google Maps environment. It assumes nothing and each piece is explained in detail. If you want to integrate Google Maps into your site but you don’t know how to do it, then this tutorial is for you. It requires a very minimum number of codes, so it is very easy to follow.
11. Build a POI map using jQuery & Google Maps v3 (revised) by Bogdan Pop
12. Embellishing Your Google Map with CSS3 and jQuery by Xavier Shay
This tutorial will be discussing the technique recently used by Xavier Shay to spice up the “Places to shop and eat” map on Vegan Melbourne, using a combination of the jQuery Google Maps API, jQuery animation, and some newer CSS effects.
13. How to easily add a Google Map using jQuery and an address in less than 5 minutes by Addy Osmani
Take a look at how to easily add Google Maps to your pages. Many of the examples online on how to use the Maps service rely on you being able to get the exact longitude and latitude of your location for the API to figure out where the location you want to show is displayed. This is a little too demanding for any business (or developer) to easily lookup and so Addy Osmani is sharing with you a much easier way of getting Maps on your site (whether you want to highlight one location or many)…and all you’ll need is the addresses!
Useful jQuery Google Maps Resources
14. Google Maps Mania
Google maps mania is a cool and interesting blog that tracks the websites, ideas and tools being influenced by Google Maps. It contains reviews and informative articles that talk about the way users benefit from Google maps. It is therefore a nice source of idea for you on how to integrate Google map on your website depending on your personal preference.
