Collection of free jQuery responsive map examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Map

Author:
Andy Westmoreland | March 28, 2022
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Highlight Indoor Map

Highlight Indoor Map

Author:
Calle | September 15, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
animate.css

Mapoid

Author:
miso25 | July 12, 2018
Made with:
HTML / CSS / JS

About a code

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

Sketching Map of Nepal Using SVG Animation

Author:
Bijay Josi | August 24, 2017
Made with:
HTML / CSS / JS

About a code

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
Interactive Map

Interactive Map

Author:
José Salazar | July 17, 2017
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, tippy.css, bootstrap.js, tippy.js
JQVMAP

JQVMAP

Author:
Peter Schmalfeldt | May 6, 2012
Made with:
1569 stars102 watchers

About a code

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

Author:
Kirill Lebedev | February 5, 2012
Made with:
1131 stars80 watchers

About a code

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

Maplace.js

Author:
D. Moraschi | February 17, 2013
Made with:
995 stars66 watchers

About a code

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

jQuery Mapael

jQuery Mapael

Author:
Vincent Brouté | June 23, 2013
Made with:
865 stars53 watchers

About a code

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.

gmap3

gmap3

Author:
Jean-Baptiste Demonte | June 13, 2011
Made with:
648 stars65 watchers

About a code

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

Snazzy Info Window

Snazzy Info Window

Author:
Atmist | September 10, 2016
Made with:
347 stars31 watchers

About a code

Customizable info windows using the Google Maps JavaScript API.

JQuery Location Picker Plugin

JQuery Location Picker Plugin

Author:
Logicify | October 3, 2013
Made with:
332 stars21 watchers

About a code

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

jMapping - Google Maps jQuery Plugin

Author:
Viget Labs | July 9, 2009
Made with:
211 stars19 watchers

About a code

jQuery plugin for creating Google Maps from semantic markup.

gMap

gMap

Author:
Mario Estrada | May 23, 2011
Made with:
205 stars21 watchers

About a code

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

Typeahead Address Picker

Author:
Sébastien Gruhier | February 28, 2014
Made with:
177 stars14 watchers

About a code

Address picker built with typeahead autocomplete from Twitter.

mapsed.js

mapsed.js

Author:
franz | December 17, 2013
Made with:
97 stars16 watchers

About a code

Google Maps & Places jQuery plugin.

WhatsNearby

WhatsNearby

Author:
La Grange web + création | September 27, 2013
Made with:
85 stars9 watchers

About a code

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

leaflet-storymap

leaflet-storymap

Author:
Jack Dougherty | October 26, 2015
Made with:
79 stars10 watchers

About a code

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

Geolocation Marker for Google Maps API v3

Geolocation Marker for Google Maps API v3

Author:
Chad Killingsworth | August 27, 2012
Made with:
67 stars7 watchers

About a code

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

MapIt

MapIt

Author:
Dimitris Krestos | December 2, 2013
Made with:
49 stars9 watchers

About a code

An easy way to embed google maps in your site.

useful.photomap.js: Photo Map

useful.photomap.js: Photo Map

Author:
Maurice van Creij | July 5, 2013
Made with:
20 stars1 watchers

About a code

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨