Collection of free jQuery map code examples and plugins from Codepen, Github and other resources. Data, vector and Google maps. Update of October 2021 collection. 1 new item.
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Map
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Highlight Indoor Map
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
Links
Made with
- HTML / CSS / JS
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: -
Links
Made with
- HTML / CSS / JS
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

Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Interactive Map
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, tippy.css, bootstrap.js, tippy.js

- 1569 stars
- 102 watchers
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.

- 1131 stars
- 80 watchers
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.

- 995 stars
- 66 watchers
Maplace.js
Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

- 865 stars
- 53 watchers
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)

- 648 stars
- 65 watchers
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

- 347 stars
- 31 watchers
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

- 332 stars
- 21 watchers
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.

- 211 stars
- 19 watchers
jMapping - Google Maps jQuery Plugin
jQuery plugin for creating Google Maps from semantic markup.

- 205 stars
- 21 watchers
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.

- 177 stars
- 14 watchers
Typeahead Address Picker
Address picker built with typeahead autocomplete from Twitter.

- 97 stars
- 16 watchers
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

- 85 stars
- 9 watchers
WhatsNearby
A jQuery plugin to list and show nearby places around a certain position using Google Maps.

- 79 stars
- 10 watchers
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

- 67 stars
- 7 watchers
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.

- 49 stars
- 9 watchers
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)

- 20 stars
- 1 watchers
useful.photomap.js: Photo Map
Plots the GPS data of the photos in a slideshow on a map.