30+ Useful jQuery Google Maps Plugins

June 24, 2013 · 18 comments

by Sonny M. Day

google-maps-plugins

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.

In this article, I am featuring a collection of the best jQuery Google Maps plugins available, which offer a lot of map functionality for adding maps to your website. I have also added a few tutorials and Google Maps resources to help you get the most out of your Google Map integration efforts. If you find this article helpful, please share it to others. If you have, any comment do not hesitate to write them below. I have just updated this article with fresh plugins and checked all links.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.


ElegantThemes
ThemeForest

Advertisement

Useful jQuery Google Maps Plugins

Travel map pro - MORE INFO / DEMO

travel-map-pro

Easy to create a travel route with Google maps. Possible to have multiple stops on a route, stops connected by a polyline.

5 Color Themes For Google Maps API - MORE INFO

5-color-themes-for-google-maps-api

5 Color Themes for Google Map API . The standard Google Maps color theme is seen everywhere. Propose a bit of personalization to your visitors by displaying original color themes for your Google Maps.Those maps are real Google Maps. You can manipulate them, zoom, move and add markers as any Google Map. They are not static images.

Google Maps Module With Geolocation [v2] - MORE INFO / DEMO

google-maps-module-with-geolocation-v2

Google Maps module V2 was created to provide a simple service for those who need to provide a route easily. With geolocation, you can provide a route from anywhere to your home, business, factory etc … In addition, the geolocation is compatible with all browsers that support JavaScript account. In fact, if your browser is not compatible with the geolocation HTML5 , it will take place with Google AJAX API .

5sec Google Maps Stand Alone - MORE INFO / DEMO

5sec-google-maps-stand-alone

5 Sec Google Maps Stand Alone provides information about locations and ensures that you’re not wasting your time.It is a fully responsive it also has an iframe and super fast single map available, supports multiple maps per page, customizable bubble text and it works on any site.

Google Maps Events - MORE INFO / DEMO

google-maps-events

“Google Maps Events” is a nice way to show information about  locations by just clicking on  map’s markers. You can show the information in an accordion menu, in tabs menu, as modal window or in a simple div in any area of your pages!

Google Maps With Clickable Countries - MORE INFO / DEMO

google-maps-with-clickable-countries

Google Maps with Clickable Countries, US States and Continent the 3-in-1 super map a perfect substitute for flash world maps. Google maps with clickable countries offers tons of features like it works on all major browsers including IE, Opera, Firefox and Chrome, It can also be used on mobile devices.

jQuery Store Locator - MORE INFO / DEMO

jquery-store-locator

jLocator is a jQuery store locator plugin uses Google Maps API V3 and enables searching, sorting, filtering and pagination for your stores. No database required.

Interactive Maps Generator - MORE INFO / DEMO

interactive-maps-generator

This is a standalone application where you can generate as many maps as you want and copy the embed code and place the maps in any of your websites! No need to upload any extra files to your website, just embed the code!! Compatible with Joomla and other CMS’s that allow you to paste javascript code into the content!

IP Geolocation With Geo Map Lookup And Weather - MORE INFO / DEMO

ip-geolocation-with-geo-map-lookup-and-weather

IP GEOlocation is the best way to get IP geolocation. It has many options and example files included! basic tracking of own IP, define host for tracking, define IP for tracking, output without map, output only map, output without marker, output only IP – location, output only lookup, output only location weather, change (map) size, 3 maps types!

JQ Map Route Calc - MORE INFO / DEMO

jq-map-route-calc

This plugin  is very easy to use it provides a calculation of a  a route from point to point. Use Google API 3. It also offers tons of features like 8 waypoint for standard account,  interactive info direction panel, auto complete on search destinations, calculation of total distance of your route, draggable destinations on map and street view included.

Point Of Interest (POI) Auto Map - MORE INFO / DEMO

point-of-interest-auto-google-map-plugin

Poi Auto Map combines the power of Google’s Maps and Places APIs to give you a simple way to add highly interactive Point of Interest maps to your website. All you need to do is define a starting address and a list of point of interest categories and POI Auto Map does the rest. Move the map and watch the points update. You can also define a database connection from which to source your POI points. This is the largest update yet in both features and performance.

jQuery GPS - MORE INFO / DEMO

image

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.

gMap jQuery Google Maps by Cedric Kastner - MORE INFO / DEMO

image

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.

Map Widgets for jQuery - MORE INFO / DEMO

map-widgets-for-jquery

Quickly create stunning highly styled jQuery and Google Maps v3 based maps for your next business directory, real estate guide, or travel site project. Included 2 power widgets and 3 themes with custom markers and original PSDs. Saves 60 hrs of work, installs in minutes. We locally Maps Quick Widgets is a set of jQuery based JavaScript widgets that make it easy to create highly styled customized maps using Google Maps API v3. Its perfect for creating business directory websites, travel sites, real estate guides or any website where you want to go beyond the look and feel of Google Maps and showcase real world places.

gmap3 - MORE INFO

image

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.

MapIt – Maps Made Your Way - MORE INFO / DEMO

mapit

MapIt is a jQuery enabled plug-in that interacts with Google Maps API . The plug-in is designed to make navigating and finding key coordinates anywhere in the world a simple process. Completely driven by XML over AJAX , this plug-in helps you group and organize all your location links.

jQuery Plugins for Google Maps by Dylan Verheul - MORE INFO

image

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).

Google Maps Photo Search - MORE INFO / DEMO

google-maps-photo-search

Easily display photos (from Picasa) recorded near your users location or any other location. Use the simple API to dynamically or statically filter the photos by keyword.

Google Maps Video Search - MORE INFO / DEMO

google-maps-video-search

Easily display videos recorded near your users location or any other location. Use the simple API to dynamically or statically filter the videos by keyword.

goMap jQuery Google Maps Plugin - MORE INFO

image

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.

gMaps: Google Maps jQuery Plugin - MORE INFO

image

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 Map is 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.

Mapbox: Zoomable jQuery Map Plugin - MORE INFO

image

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 mouse wheel is used. This is an intuitive means by which a user may explore different areas of the map.

jMapping by Brian Landau - MORE INFO

image

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.

Useful jQuery Google Maps Tutorials

jQuery Google Maps Tutorial: #1 Basics by Marc Grabanski – MORE INFO

image

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.

Build a POI map using jQuery & Google Maps v3 (revised) by Bogdan Pop – MORE INFO

image

This tutorial will teach you how to create POI (Point of Interest) map that displays multiple POIs all at the same time. It is short very easy to follow tutorial that will really help you create a very interesting Google map.

Embellishing Your Google Map with CSS3 and jQuery by Xavier Shay – MORE INFO

image

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.

Useful jQuery Google Maps Resources

Google Maps Mania – MORE INFO

image

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.

Google Maps Help Forum – MORE INFO

image

This Help Forum which replaces the Google Maps Help Group, is a useful resource in finding answers to Google Map related questions and issues. With this Help Forum for Google Maps, it is now easier to ask questions, give answers, and share your Google Maps to others.

Author : Lars Vraa

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

{ 18 comments… read them below or add one }

Dan July 18, 2013 at 3:57 pm

Nice One..great work..

Reply

atstumas December 5, 2012 at 8:16 am

nice widgets thanx

Reply

jordi August 22, 2012 at 11:47 am

Amazing! Thanks!!!!!

Reply

dev August 16, 2012 at 7:58 am

Can any one tell which API is used in this websites? http://www.parquestejo.pt/Conteudos/Mapa.aspx?tipo=zedl&idClass=6&idObject=188

Search and click on result. how to achieve this

Reply

sam July 23, 2012 at 4:46 pm

Can some one please tell me which API is used in this site.: jobungo.com/searching.php

Reply

Peter Schmalfeldt May 7, 2012 at 8:10 am

There is also http://jqvmap.com that uses resizable SVG with fallback VML for older browsers like IE 6. I like this one since you can customize the colors and sizes pretty easily. Super configurable.

Reply

UI Designer March 3, 2012 at 7:50 am

Very nice and concise list:) Thanks for sharing

Reply

Dave January 6, 2012 at 4:45 pm

I suggest checking out MapInnovations.com…the site generates two lines of code which you include on your webpage. The result is a javascript overlay Google Maps integration with driving directions. Works and looks great…plus is free to use!

Reply

GHernandez January 11, 2012 at 7:24 pm

Check out the MapInnovations tool. Great stuff…highly recommend this

Reply

navdeep July 24, 2013 at 8:51 am

great web application. really & obviously innovatiove as its name suggest!

Reply

Twitter November 26, 2011 at 10:17 am

love google maps man

Reply

Mounir October 31, 2011 at 10:35 pm

Hi

i develop a jquery Plugin for googleMap UI

https://github.com/dzmounir/JGmapUI

Reply

Theo September 8, 2011 at 7:36 pm

Just in time, thanks for putting this together!

Reply

Sh4R August 27, 2011 at 12:59 am

gmap3 ‘ 4.0 has been released
http://gmap3.net/download.html

Reply

ocean July 19, 2011 at 4:33 pm

long time I was looking up script for my site http://www.5starstour.com now I had all. thanks

Reply

honlapkészítés June 19, 2011 at 8:33 am

Thank you, very nice collection!

Reply

Web Design Nottingham June 18, 2011 at 2:49 pm

ooooo interesting!

Reply

Incircle Media June 18, 2011 at 10:25 am

Wow, excellent post.

Thanks a lot to share it.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics