jQuery Maps Plugin & Tutorials with Example

Twism : A clickable SVG maps jQuery plugin

Twism : A clickable SVG maps jQuery plugin

Twism is a clickable SVG maps jQuery plugin.Well, it works for any SVG that has IDs on the clickable regions. I made it for rolling out quick maps, though. You should probably use D3.js or Raphael if you want a robust, tested library for manipulating vector graphics.

Mappy.js : Google Maps & Places jQuery plugin

Mappy.js : Google Maps & Places jQuery plugin

I couldn’t find anything that fully did what I was after so I built mappy (besides I need the JavaScript practice!).

In short it provides the following:

  • UI for users to “select” a place (you get a callback detailing what they picked)
  • UI for adding “custom” places
  • Support for firing a map up full-window (without having to create a DIV on the page)
  • Add searching to the map
  • Add/Edit and update your own “custom places” (i.e. not those in the Google Places API doesn’t know about, but you do)
  • Works with multiple maps on the same page

jQuery Location Picker plugin

jQuery Location Picker plugin

This plug-in allows to easily find and select a location on the Google map. Along with a single point selection, it allows to choose an area by providing its center and the radius. All the data can be saved to any HTML input element automatically as well as be processed by Javascript (callback support).

Features:

  • Doesn’t require JQuery UI. The only requirements are JQuery and GoogleMaps API
  • Allows to pick an area with specified radius
  • Automatical binding to UI components (bidirectional data exchange)
  • Autocomplete for address input
  • Navigation by cordinates as well as by address

Geocomplete : jQuery Geocoding and Places Autocomplete Plugin

Geocomplete : jQuery Geocoding and Places Autocomplete Plugin

An advanced jQuery plugin that wraps the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide an input that lets you search for locations with a nice autocomplete dropdown. Optionally add a container to show an interactive map and a form that will be populated with the address details.

Custom Interactive Map : jQuery Plugin

Custom Interactive Map : jQuery Plugin

If you would like to turn your photo/vector graphic map into a fancy interactive map application that is supported by every major browser and it’s working even on mobile or other touch devices, you can stop seeking, you’ve come to the right place. In fact, you came to the only place, since it is the only utility available with this unique feature set.The supported map file formats are: JPG, PNG and SVG.

Features:

  • Unlimited landmarks: Any number of locations with unique pins and various actions
  • Unlimited floors: Multiple floors are supported without any limitation
  • Deeplinking: Every location can be referenced by it’s own URL
  • Browser support: Works great in every major browser, even Internet Explorer 8
  • Responsive design: Provides optimal experience across a wide range of devices
  • Touch optimized: Touchscreen devices, like tablets and smartphones are also supported
  • Well documented: A detailed user guide is included

WhatsNearby : jQuery plugin to list and show nearby Places

WhatsNearby : jQuery plugin to list and show nearby Places

A jQuery plugin to list and show nearby places around a certain position using Google Maps.

mobileGmap : jQuery responsive Google maps

mobileGmap : jQuery responsive google maps

Well, when scrolling a website on your mobile device you can get trapped in a google map due to the Maps scrollbar of death™. This plugin gives you a native google maps on your website and a safe fallback to the static image API of google maps for smaller devices.

FormMapper : Address Autocomplete & Geolocation with jQuery

FormMapper : Address Autocomplete & Geolocation with jQuery

An advanced jQuery plugin that utilizes the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide a single input field that lets you search for locations with an autocomplete dropdown. Optionally: you can add a map container that will display an interactive map with drag and drop location finding capabilities and a form that will be populated with the complete address details including the latitude and longitude coordinates.

jQuery birdseye : Plugin for moving-map search

jQuery birdseye : Plugin for moving-map search

A plugin for moving-map search, like on Yelp or Airbnb. Built with jQuery and Leaflet.

jQuery Birdseye is a plugin for replicating the “search in map” functionality of Yelp/Airbnb/Google using the API of your choosing. With a small bit of setup, you can have the sweet, mapsearchy goodness that these sites do, at a fraction of the cost.

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.



Best jQuery websites design awards