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 jQuery Google Maps plugins, which are not only easy to use in websites but also offer a lot of map functionality in case you need them. There are also tutorials and Google Maps resources that can 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 don’t hesitate to write them below. Happy reading!
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.
Useful jQuery Google Maps Plugins
1. Travel map pro
MORE INFO / DEMO by CodeCanyon (premium plugin)
2. Point Of Interest (POI) Auto Map
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.
MORE INFO / DEMO by CodeCanyon (premium plugin)
3. 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.
MORE INFO (free plugin)
4. 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.
MORE INFO / DEMO (free plugin)
5. Map Widgets for jQuery
Welocally 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.
MORE INFO / DEMO by CodeCanyon (premium plugin)
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.
MORE INFO (free plugin)
7. MapIt – Maps Made Your Way
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.
MORE INFO / DEMO by CodeCanyon (premium plugin)
8. Put Me On The Map
Put Me On The Map is simple JavaScript component that marks a location on The Google Maps based on its street address. This is a useful component for any “Contact Us” page on your website to mark exactly where you are located.
MORE INFO / DEMO by CodeCanyon (premium plugin)
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.
MORE INFO (free plugin)
10. 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).
MORE INFO (free plugin)
11. 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.
MORE INFO / DEMO by CodeCanyon (premium plugin)
12. Tweet to Map
Tweet to Map is an easy-to-use, highly customizable, jQuery plugin, to show user Twitter posts on a Google Map.
MORE INFO / DEMO by CodeCanyon (premium plugin)
13. 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.
MORE INFO / DEMO by CodeCanyon (premium plugin)
14. 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.
MORE INFO (free plugin)
15. 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.
MORE INFO (free plugin)
16. 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.
MORE INFO (free plugin)
17. 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.
MORE INFO (free plugin)
Useful jQuery Google Maps Tutorials
18. 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.
19. Build a POI map using jQuery & Google Maps v3 (revised) by Bogdan Pop
20. 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.
Useful jQuery Google Maps Resources
21. 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.
22. Google Maps Help Forum
Courtesy: http://www.tripwiremagazine.com/2012/06/jquery-google-maps.html
No comments:
Post a Comment