18 jQuery Map Plugins

About a code

Mapoid

Mapoid is a jQuery plugin to create responsive html map area highlighter with area selection. Minified version 8.5 kB.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Sketching Map of Nepal Using SVG Animation

An attempt to sketch the map of Nepal using SVG animation with velocity.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: velocity.js, velocity.ui.js

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.

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.

Maplace.js

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

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.

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

gmap3

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

• less than 10kb minified
• Google Maps syntax
• no limitation of the Google Maps API

Snazzy Info Window

Customizable info windows using the Google Maps JavaScript API.

• 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

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.

jMapping - Google Maps jQuery Plugin

jQuery plugin for creating Google Maps from semantic markup.

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.

Typeahead Address Picker

Address picker built with typeahead autocomplete from Twitter.

mapsed.js

Google Maps & Places jQuery plugin.

• 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

WhatsNearby

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

leaflet-storymap

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

• 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

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.

MapIt

An easy way to embed google maps in your site.

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

useful.photomap.js: Photo Map

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