Google maps API may seem intimidating when using it for the first time.
If all you are hoping to do is create a map to display simple directions to a client’s address, you may wonder if all the different interactive options are really necessary or just distractions to make the whole process more complicated and if there is a simpler approach you could take.
These plugins provide a wide variety of benefits. Besides installing maps they also offer the option to add functionality in other areas. Make sure you choose the proper jQuery maps plugin as they all have a different degrees of documentation and features.
Map plugins have other uses besides placing maps and they can be useful thanks to the additional functions clients sometimes require, for example navigation or GPS trackers.
To help you build and design more effective and successful websites we are featuring some of the most popular free jQuery Maps Plugins. These have all been rated as being some of the best.
jQuery Mapael – Dynamic vector maps
jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.
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.
Datamaps is intended to provide some data visualizations based on geographical data. It’s SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library.
Leaflet Yeoman Generator
Leaflet Yeoman Generator helps you to get started with your next map application.
Kartograph is a simple and lightweight framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.
Actually, Kartograph is two libraries. One generates beautiful & compact SVG maps; the other helps you to create interactive maps that run across all major browsers.
OpenLayers 3 is a high-performance, feature-packed library for creating interactive maps on the web.
A jQuery plugin to list and show nearby places around a certain position using Google Maps.
Mapsicon is a free collection of maps for nearly every country in the world, available in 11 different sizes, ranging from 16×16 pixels to 1024×1024 pixels, as well as .svg format. Those maps are intented to serve as nice placeholders or illustations in your project – they do not replace real or extremely precise maps and they have no ambition to do so.
Geolocation Marker for Google Maps API v3
This library uses geolocation to add a marker and accuracy circle to a map. The marker position is automatically updated as the user position changes.
Lazy-loading Google Maps
The easiest way would be unconditionally loading a script file and map instances at once. But that would be a very very wrong way. The right way is to lazy-load the script file and map instances one by one.
jQuery tWism: A clickable SVG maps jQuery plugin
JQuery Location Picker
jQuery Geocoding and Places Autocomplete Plugin
An advanced jQuery plugin that wraps the Google Maps API’s Geocoding and Places Autocomplete services. You simply provide an input that lets you search for locations with a nice autocomplete dropdown. Optionally add a container to show an interactive map and a form that will be populated with the address details.
jQuery Birdseye is a plugin for replicating the “search in map” functionality of Yelp/Airbnb/Google using the API of your choosing. With a small bit of setup, you can have the sweet, mapsearchy goodness that these sites do, at a fraction of the cost.
Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.
It requires jQuery and Google Maps API v3 so you need to have both in your page.
Majuro.JS helps you make detailed, interactive maps with open buildings data.
It’s free and open source.