Post thumbnail: 16 jQuery Map Plugins

16 jQuery Map Plugins

Collection of free jQuery map plugins. Data, vector and Google maps.

Demo image: JQVMAP
Made by
  • Peter Schmalfeldt
Github activity
  • 1569 stars
  • 102 watchers
About the plugin

JQVMAP

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.

Demo image: jVectorMap
Made by
  • Kirill Lebedev
Github activity
  • 1131 stars
  • 80 watchers
About the plugin

jVectorMap

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.

Demo image: Maplace.js
Made by
  • D. Moraschi
Github activity
  • 995 stars
  • 66 watchers
About the plugin

Maplace.js

Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

Demo image: jQuery Mapael
Made by
  • Vincent Brouté
Github activity
  • 865 stars
  • 53 watchers
About the plugin

jQuery Mapael

For example, with Mapael, you can display a map of the world with clickable countries. You can also build simple dataviz by setting some parameters in order to automatically set a color depending on a value to each area of your map and display the associated legend. Moreover, you can plot cities on the map with circles, squares or images by their latitude and longitude.

Features
  • based on jQuery and raphael.js. And optionally based on jQuery mousewheel for the zoom on mousewheel feature
  • interactive: set href, tooltip, add events and many more on the elements of your map
  • plottable cities Cities can be plotted on the map with circles, squares, images or SVG paths by their latitude and longitude
  • areas and plotted points colorization with legends: Mapael automatically sets attributes like color and size to each area and plotted point displayed on map and generates an interactive legend in order to build pretty dataviz
  • links between cities: you can draw links between the cities of the map. Easy to add new maps. Build your own maps based on SVG paths
  • SEO-friendly: an alternative content can be set for non-JS users and web crawlers
  • resizable: maps are easily resizable
  • zoom: zoom and panning abilities (also on mobile devices)
Demo image: gmap3
Made by
  • Jean-Baptiste Demonte
Github activity
  • 648 stars
  • 65 watchers
About the plugin

gmap3

gmap3 is a plugin for jQuery which allows you to use the Google maps API easily.

Features
  • less than 10kb minified
  • Google Maps syntax
  • no limitation of the Google Maps API
Demo image: Snazzy Info Window
Made by
  • Atmist
Github activity
  • 347 stars
  • 31 watchers
About the plugin

Snazzy Info Window

Customizable info windows using the Google Maps JavaScript API.

Features
  • responsive sizing: the info window will size properly for a variety of screen and map sizes
  • custom styling: 1. customize the border radius, shadow, background color, border, and much more 2. supports SCSS styling.
  • dynamic content: supports dynamic content after initialization with proper resizing
  • multiple placements: place the info window to the top, bottom, right, or left of the marker
Demo image: JQuery Location Picker Plugin
Made by
  • Logicify
Github activity
  • 332 stars
  • 21 watchers
About the plugin

JQuery Location Picker Plugin

This plug-in allows finding and selecting a location on the Google map. Along with single point selection, it allows area selection by choosing a point and specifying a radius. The selection can be saved to any HTML input element or processed by Javascript with callback support.

Demo image: jMapping - Google Maps jQuery Plugin
Made by
  • Viget Labs
Github activity
  • 211 stars
  • 19 watchers
About the plugin

jMapping - Google Maps jQuery Plugin

jQuery plugin for creating Google Maps from semantic markup.

Demo image: gMap
Made by
  • Mario Estrada
Github activity
  • 205 stars
  • 21 watchers
About the plugin

gMap

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With less than 2 KB in size (minified and gzipped) it is very flexible and highly customizable.

Demo image: Typeahead Address Picker
Made by
  • Sébastien Gruhier
Github activity
  • 177 stars
  • 14 watchers
About the plugin

Typeahead Address Picker

Address picker built with typeahead autocomplete from Twitter.

Demo image: mapsed.js
Made by
  • franz
Github activity
  • 97 stars
  • 16 watchers
About the plugin

mapsed.js

Google Maps & Places jQuery plugin.

Features
  • 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
Demo image: WhatsNearby
Made by
  • La Grange web + création
Github activity
  • 85 stars
  • 9 watchers
About the plugin

WhatsNearby

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

Demo image: leaflet-storymap
Made by
  • Jack Dougherty
Github activity
  • 79 stars
  • 10 watchers
About the plugin

leaflet-storymap

Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery.

Features
  • scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Initial map displays all point markers
  • viewers can pan and zoom the map independently of the narration, or click on any point to go directly to that chapter
  • easy-to-learn template to create your own storymap. Upload text, point coordinates, zoom levels, and image links to a CSV generic spreadsheet, and drag into http://geojson.io to create a GeoJSON data file
  • images can be stored in local subfolder or pulled from an external URL
  • works in modern browsers: Chrome, Firefox, Safari, Internet Explorer 9+
  • accessible tested using the WAVE and aXe tools
Demo image: Geolocation Marker for Google Maps API v3
Made by
  • Chad Killingsworth
Github activity
  • 67 stars
  • 7 watchers
About the plugin

Geolocation Marker for Google Maps API v3

A library for adding a marker which tracks a user's location for use with the Google Maps JavaScript API v3.

Demo image: MapIt
Made by
  • Dimitris Krestos
Github activity
  • 49 stars
  • 9 watchers
About the plugin

MapIt

An easy way to embed google maps in your site.

Features
  • customizable google maps (dimensions, zoom level, terrain type, etc)
  • multiple markers with text and custom icons
  • routes
  • events to handle markers and routes (show, show_all, hide, hide_all)
Demo image: useful.photomap.js: Photo Map
Made by
  • Maurice van Creij
Github activity
  • 20 stars
  • 1 watchers
About the plugin

useful.photomap.js: Photo Map

Plots the GPS data of the photos in a slideshow on a map.

Back to top