Best jQuery Maps Plugins & Tutorials with Demo

Mapbox: Zoomable jQuery Map Plugin

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.

jQuery Searchable Map Template with Google Fusion Tables

jQuery Searchable Map Template with Google Fusion Tables

You want to put your data on a searchable, filterable map. This is a free, open source tool to help you do it.

Features :

  • clean, full screen layout
  • new mobile and tablet friendly using responsive design
  • address search (with variable radius)
  • geolocation (find me!)
  • new RESTful URLs for sharing searches
  • results count (using Google’s Fusion Tables API)
  • ability to easily add additional search filters (checkboxes, sliders, etc)
  • all done with HTML, CSS and Javascript – no server side code required

geo autocomplete : jQuery plugin to autocomplete location using Google Maps v3 API

geo autocomplete : jQuery plugin to autocomplete location using Google Maps v3 API

geo-autocomplete converts any input field on a web page into an autocomplete field that suggests locations in real-time as you type, including a little thumbnail to help you quickly choose the right location. It’s like Google Instant for your Maps.

The Google Maps V3 API now incudes an autocomplete feature that will adapt any text input field to autocomplete locations &/or Places. It doesn’t show thumbnails yet but the addition of Places will be great for some use cases.

jMapping : jQuery plugin for creating Google Maps from semantic markup

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

Google Maps Slider with jQuery

Google Maps Slider with jQuery

I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.

I created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions.When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

A jQuery Plugin for Zoomable, Interactive Maps

A jQuery Plugin for Zoomable, Interactive Maps

Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible.

We wanted the experience to be engaging as possible but also easily updatable in the future. We settled on jQuery as the interface technology to use as it made it simple to build, display and animate the map.

Map Widgets for jQuery

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.

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.

Simplifies the Google Maps v3 API

  • 2 Widgets Included, Place Widget and Interactive Multi Place Widget
  • 3 Themes with custom marker and icon photoshop files included
  • Package includes working demos with installation and styling guides

GMAP3 : A jQuery plugin to use Google maps

GMAP3 : A jQuery plugin to use Google maps

gmap3 is a plugin for jQuery which allows you to use the Google maps API easily. It provides some powerful functions (clustering…) and some simple which avoid you to write lot of repetitive code. However, it allows to use all the Google Maps API.

JQVMap : jQuery Vector Maps

JQVMap : jQuery Vector Maps

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

This project is a heavily modified version of jVectorMap. I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications.

jQuery Rockstar Map plugin

jQuery Rockstar Map plugin

Rockstar Map is a jQuery plugin for displaying an interactive map with locations, navigation and more. It’s perfect for any Contacts page and it’s super easy to setup and use. It has features like fullscreen mode, smooth animations, inertia, fluid width, touch gestures and a beautiful interface that is visible and reads well with any image in the background.

Rockstar Map is designed with mobile devices in mind from the ground up! It’s fully responsive, the width dynamically changes when the viewport is resized (when the device goes in landscape mode), and it remains responsive in fullscreen mode as well.

Finger gestures are also supported! The map is even more intuitive to use on a touchscreen device, because of that. Pinch to zoom, tap and move to navigate around – it’s all there.