A Collection Of jQuery Maps Plugins
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.
A quick and easy answer to this is could be to use a jQuery plugin to make the process a whole lot more simple. One of the most popular Javascript libraries with website developers and designers, jQuery has the capabilities to fit to your websites’ requirements and help solve issues making your website become more effective and creative.
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
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
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
Leaflet Yeoman Generator
Leaflet Yeoman Generator helps you to get started with your next map application.
Kartograph
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.
smallworld.js
smallworld.js is a utility for generating map overviews using GeoJSON and HTML Canvas. It was created out of a need to render simple map previews, quickly and efficiently, without strict Terms of Use and without heavy client libraries.
Planetary.js
Planetary.js is a JavaScript library for building awesome interactive globes. Planetary.js is based on D3.js and TopoJSON. It has built-in support for zoom, rotation, mouse interaction, and displaying animated “pings” at any coordinate.
jQuery Travelmap
Turf.js
Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools. Turf can be added to your website as a client-side plugin, or you can run Turf server-side with Node.js.
OpenLayers 3
OpenLayers 3 is a high-performance, feature-packed library for creating interactive maps on the web.
WhatsNearby
A jQuery plugin to list and show nearby places around a certain position using Google Maps.
Cesium
Cesium is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization. Cesium is open source under the Apache 2.0 license. It is free for commercial and non-commercial use.
OSM Buildings
OSM Buildings is a JavaScript library for visualizing OpenStreetMap building geometry on 2D and 3D maps. This version is using a custom WebGL base map for any event and tile logic.
Mapsicon
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.
Generic Globe
useful.photomap.js
jQuery tWism: A clickable SVG maps jQuery plugin
Mapsed.js
JQuery Location Picker
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.
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
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
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
Majuro.JS helps you make detailed, interactive maps with open buildings data.
It’s free and open source.
source
