skip to Main Content
Our free WordPress themes are downloaded over 3 MILLION times. Get them now!
Top 28 Best Free JQuery Map Plugins To Create An Interactive Map For Your Website – 2017

Top 28 Best Free jQuery Map Plugins To Create An Interactive Map For Your Website – 2017

jQuery has been around for over a decade now, enabling front-end developers and general web developers to create dynamic, interactive and fun libraries for extending the functionality of the web projects they are working on. In more ways than one, jQuery has been a godsend for manipulating the browser DOM, as well as enabling more fluid cross-browser and cross-device support for latest web technologies. The project is nowhere near complete, and a new jQuery 3.0 version was recently announced which has gone in a public BETA mode. The future of jQuery is looking very bright indeed.

With new platforms like React sweeping the developer nation, the developers themselves are beginning to recognize how React is slowly overtaking jQuery’s functionality in so many different ways, yet we cannot ignore the fact that jQuery is what changed the ecosystem of front-end development and even mobile development in many ways. Dion Almaer shares his thoughts on this in a compact Medium blog post.

jquery

The range of jQuery plugins and libraries has extended to support every aspect of modern web development, and here today we will be exploring the huge variety of jQuery Maps plugins — a specific set of libraries and plugins that focus on helping webmasters, developers, and engineers to better integrate interactive and bold maps widgets to help with location related tasks; showing maps, business locations and details, integrating world maps for interactivity, amongst other reasons that only you will be aware of. Knowing how to integrate Google Maps properly alone can bring so many different benefits to the experience of your website or application.

With platforms like Google Places in full swing now, businesses should focus on their maps widgets more than ever — they allow to establish context, interactivity and general information about your business and what it entails. We will be covering nearly 30 unique jQuery maps plugins for helping you to create the best maps experience on your website, without the need to invest in hiring developers and designers to do the work for you. We welcome any developers and programmers who have created their own jQuery libraries related to maps, to share those libraries in the comments for consideration of inclusion in this great roundup!

Geolocation Marker

geolocation marker

We begin our rundown with a simple Geolocation library from Chad Killingsworth. If you are building real-time apps that require to track the user’s geo location on the go, and you are working with the Google Maps API v3 — this is the library to get for creating a marker circle over each of the users locations as they interact with your map widgets in real-time. With the help of latest ES6 modules, this library will be a great help for those projects that expect users to interact with their maps in real-time, and need a way to ensure solid directions understanding.

Download

tWism

Clickable Map tWism

D3 is a quite known JavaScript library for those who need true interactivity in their browser, but using D3 for simple and mundane tasks like Maps can sometimes prove to be time consuming, and generally inefficient. Because of that, Cody Brumfield built his own SVG Maps plugin for allowing direct interaction between the World map and everything that you want to use it for. You can quickly build a World Map and then inject it with your own colors, and specifications once a user clicks on a specific part — country — of the map.

Download

Maplace

Maplace.js

Maplace is an interactive, but very sophisticated, JavaScript based Google Maps library for quickly embedding and manipulating Google Maps within your website. Its most sought after features are the markers (for marking specific locations on the map), circles (for circling specific areas of interest with different size and color circles), menus (for selecting between a range of different locations), polygons (for creating different kinds of routes for easier understanding of routes), and other interesting features that will extend the basic functionality of the Google Maps API that you might already be so used to using in everyday development practice.

Download

Route Animate

GMaps Route Animate

Animation is becoming a much more stronger aspect of the everyday web experience. Henrique Alves is sharing with us a very lightweight jQuery library for animating the routes of our specified locations on the maps that we use. We can select two different locations, then utilize a simple call button for ‘animating’ the route, at which point JavaScript will create a seamless animation that showcases the best possible route from point A to point B.

Download

mobileGMaps

mobileGMaps

Although slightly left behind project, Jochen Vandendriessche has built a very popular Responsive Google Maps library which will create a native Google Maps browsing and scrolling experience on all of your cross-device website experiences. You can learn more in-depth information about the capabilities of this plugin at Jochen’s official blog.

Download

WhatsNearby

WhatsNearby an useful plugin

Each plugin serves a different, often specific, function. The WhatsNearby library will be extremely useful for websites (review sites the most perhaps) that need to showcase different types of activities, locations, and other stuff and then showcase other possible options within the same context around the area that others are exploring. For example we may want to display the nearest sports activities centers within a kilometers radius, with the exclusion of yoga studios, or vice versa. Will be an extremely useful plugin for sites in promotion field too.

Download

Location Picker

jQuery Location Picker -- Demo

Location Picker does exactly that, helps you to pinpoint a specific location on the Google Maps. You can choose to select single locations, but with the ability to extend the radius of your selection. The other feature of the plug-in is automatic address resolver which allows to get address line from the selected latitude and longitude. The plug-in also supports searching by address typed into the bound input element which uses auto-complete feature from Google API to make the search process easier. Shared with the community by Dmitry Berezovsky.

Download

Geolocate

Geolocate

A very elegant library by Miloš Popović for pinpointing geo locations in simple and convenient style. Specify the longitude and latitude and the plugin will do rest of the work automatically.

Download

Mapael

jQuery Mapael

jQuery Mapael is a fork of the ever popular Raphael JavaScript library (based on top of it) that’s built to support the displaying of dynamic vector maps within your website projects. The most basic feature of Mapael is that you can quickly build a country-clickable World map, without the need to rely on multiple libraries for the job. You can quickly specify your own color choices for each country, you can easily gather around a group of cities by marking them with objects like a square, a circle, or an image — all based on longitude and latitude. The documentation offers an extensive learning curve that isn’t so hard to master. Supports SVG. Is built with search engines with mind, so search robots will be able to index your dynamic maps without thinking twice about it.

Download

easyLocator

easyLocator

In need of a solution for loading multiple locations on your maps at the same time, without the use of databases? Saul Burgos Davila has crafted a solution just for that, and he calls it the easyLocator. The main feature of easyLocator is to enable developers to load a spreadsheet file, or an array of data that consists of specific locations, and then execute that data on your Maps widget to outline all the necessary locations.

Download

Typeahead Address Picker

Typeahead Address Picker

The Typeahead Address Picker is a quick solution for finding essential details about addresses on the fly. Type in the address you need more information about and click enter, then see the address being displayed on the maps, as well as an array output of the most essential information about that particular address.

Download

Mapsed

Mapsed

Mapsed is a home-based (built for specific needs) jQuery project for managing Google Maps when users can select, and add custom places to their Google Maps. This makes it much easier to select your own favorite places, mark them, and then talk about them in the default Google Maps widget style. Can also be configured to function with a variety of maps that share the same web page space.

Download

Geocomplete

Geocomplete jQuery Geocoding and Places Autocomplete Plugin

A modern state of the art jQuery library for utilizing the Google Maps features like Autocomplete for Places, and Geocoding for collecting location data. The library gives you a simple input form where you can look up locations through an autocomplete module, upon finding the address you can choose to display a dynamic map next to the address that will be extended with a more full list of the address details you are looking for.

Download

MapIt

MapIt An easy way to embed google maps in your site.

Dimitris Krestos has carved up MapIt — an interactive and easy way for embedding and displaying Google Maps on your website. Apart from that feature, the other big features include the ability to specify different routes between locations, to mark several locations with different texts and different icons, specific events for handling markers and routes, and also full management over the appaerance of the maps themselves; colors, terrains, dimensions, zoom levels, etc,.

Download

Useful Photo Map

Useful Photo Map

Photos are often embedded with solid GPS data, and sometimes we are in need of way to uncover this data for our own benefit or use, but what about doing this on a large scale? For such projects, the Useful Photo Map jQuery library is the perfect answer. It will help you to map out a folder of photos on a beautiful Map terrain to give you a broader understanding of where each pictures was taken.

Download

Landcarte

Landcarte a Google Maps jQuery plugin

Landcarte has been built on top of jQuery and JavaScript to allow developers to easily embed their geo-based maps within a website’s page and enable the use of a variety of features — such as the ability to mark places, to select places with different shapes, to build layers of locations, create interactive events for the user for each location, and also to do geocoding when required. The plugin’s core is based on jQuery and the Google Maps API version 3.

Download

DataMaps

DataMaps

We return to a library we mentioned already — D3.js! DataMaps is built on top of D3 to provide an interactive maps experience that can be used for visualizing data, mostly that. All of which has been rolled within a tiny JavaScript file that will make this data visualization experience a seamless one. The data can be visualized based on different types of geolocations. The plugin fully supports SVG vector visuals, will scale on any device, and mostly functions through the D3 library so you know that everything is safe and secure. To better grasp the potential it is highly recommended to indulge in the demo files and explore the plugin deeper.

Download

Gmap3

Gmap3

Gmap3 is one of the oldest jQuery libraries still functioning that helps developers and designers to fully customize their Google Maps widgets on their websites. Whether it’s doing custom location events, marking places with custom texts and so forth, Gmap3 is a very extended solution for helping you to deal with all those at once.

Download

jHERE

jHERE Playground

jHERE is a powerful API solution for building the kind of interactive and dynamic maps that speak of your character and personality. Grab your own maps files and amplify them with extendable features that jHERE is here to offer.

Download

JQVMap

JQVMap Resizable Scalable Vector Graphic SVG Maps for Modern Browsers

JQVMap is for helping you to build scalable Vector Maps on the go. It uses the SVG technology pattern to help you create a stunning maps experience which you can then modify and amplify through the use of other external libraries. The output visuals are truly stunning, and perhaps the most beautiful of all the jQuery maps plugins we have looked at today. The plugin is frequently kept up to date, so you’re constantly getting the latest JavaScript functionality in your maps experiences. Read the documentation to learn more about the specific features that JQVMap has to give.

Download

jVectorMap

jVectorMap

jVectorMap is a JavaScript-built vector map solution that uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. It supports full interactivity between the maps and the code on the server-side. You can customize your maps with events and interactive web behaviors through the use of an extensive API.

Download

Kartograph

Kartograph

While Google Maps and other similar services have paved the way for truly interactive map experiences, some industries (like bloggers, journalists, developers and designers) would rather rely on a service that provides its own maps upon which we can build the kind of interactivity we need. The Kartograph library consists of two different aspects — the first aspect lets you build SVG maps, while the other aspect lets you build upon these SVG maps to make them interactive with cross-browser support. Browse through the Kartograph’s homepage and explore the different demo’s offered.

Download

Leaflet

Leaflet a JavaScript library for interactive maps

We didn’t see many mobile-first mapping solutions in our list, so we are pleased to mention Leaflet — a JavaScript built jQuery library for mobile-first interactive maps. The biggest names in technology are relying on Leaflet to provide its users with a flawless maps experience. The features are many, and many of whom are also extendable. And to top it off, it’s super lightweight — coming in only at a few dozen KB’s of size when fully compiled.

Download

Planetary

Planetary.js Awesome interactive globes for the web

Who needs traditional maps when you can build globes? Planetary.js is for helping developers and creatives to build effective Earth Globe simulations that can be amplified with custom events for more in-depth interaction between the user and the globe itself.

Download

Snazzy Maps

Blue water Snazzy Maps Free Styles for Google Maps

Snazzy Maps does not offer a lot of interactive features unfortunately, but what it does offer is something completely unique to our list, and perhaps very complimentary. Snazzy Maps lets you download custom Google Maps skins that you can use on your exisiting Google Maps widgets, especially those that you are yet to create with the help of all the cool jQuery map libraries that we learned about. Using these styles in your website is as easy as copying the JSON on any style page and passing this to the map options of any Google Maps object. If you are creating your own HTML and JavaScript website be sure to read up on the Google Maps API and if this code is still too technical check out the Google MapBuildr and just pick and choose the settings you want.

Download

Premium jQuery Maps Plugins

Having taken a deeper glimpse at the best free jQuery map plugins, it’s time we explore a handful of premium map plugins that have helped thousands of webmasters to create a more personal and more modern maps experience. However we do not wish to say that any of these premium plugins can outweigh the functionality of all other plugins we have mentioned in the list, make an investment in one of the following plugins only if you feel that they can provide the kind of maps experience that you are actually looking for.

UBER Google Maps

UBER Google Maps for jQuery

UBER Google Maps is a responsive maps plugin that offers an easy to use drag and drop editor for building your maps on the go. It supports full-screen map viewing experience, there are more than 50+ different localization options available, more than 100+ unique color and feel styles to choose from, and you get access to customer support where the creators of the plugin will help you to create the kind of maps experience that you are looking for.

Download

MapSVG

MapSVG WordPress jQuery plugin turn any SVG file into interactive map or floorplan

MapSVG takes any SVG map of your choosing and turns it into a fully interactive powerhouse. You get a range of features and options that will help you create your own static Google Maps experience, without the need of relying on external third party solutions.

Download

Image Map Pro

Hotspot Map - Powerful Annotations and Tooltips

Image Map Pro is for making maps out of your images. Image Map Pro comes with a fully featured web app to quickly create, edit and export your image maps. Using the app is super easy and a step-by-step guide is also included! Create, extend and talk about your images through widgets that can be used to discuss every single aspect of the images you ar sharing.

Download

Alex Ivanovs

Alex is a freelance writer with more than 10 years of experience in design, development, and small business. His work has been featured in publications like Entrepreneur, Huffington Post, TheNextWeb, and others. You can find his personal writing at The Divine Indigo.

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don't receive additional bonus for positive reviews.
Back To Top