Here are the JS libraries you can use to show special map markers, draw custom route lines or even show a dialog when you hover or click on certain points of the map.
Personalize your maps in the style that you want — some of them can be styled with CSS — or customize your map to be as interactive as you like. The source of the map data, dependencies and licenses of each library has been included for your convenience.
Maps are handy for a lot of reasons. Not only do they help us navigate through certain areas,... Read more
GMaps makes adding and customizing Google Maps a breeze. Aside of adding a map, you can also a couple of things into the map, such as polylines which may be useful for drawing a route, a special menu control, and even HTML elements.
GMaps is compatible with JSON formatted data which you can utilize to integrate your map with a particular app, like Foursquare.
At 5KB, jHERE shows you that size doesn’t matter; you can still build a powerful interactive map with a handful of customization options. jHERE derives map visualization from HERE map, which is one of the most popular map providers for Windows Phone.
The library can be extended with new functionality, and there are a couple of extensions developed for this library including one for adding shapes, routes, and custom markers.
Kartograph comprises of two files, Kartograph.ph to generate the map in SVG format, and Kartograph.js to add interactive elements on top of the map. Since Kartograph.js is built on top of Raphael.js the map would work nicely down to IE7. You can have a look at the interactive map demos to discover what Kartograph can do.
jQuery Mapael allows you to create maps with elegant data visualization as well as interactivity. You can, for example, create a map and designate each region on the map with different colors based on region. You can also add tooltip on the region, as well as event handlers like
If building a map with D3.js is overwhelming, you can use DataMaps. DataMaps is essentially a D3.js plugin that is developed specially to build maps. It inherits many of the capability of D3.js, hence you can build simple or very customized maps with it. Did I mention that the map is responsive?
GeoChart is a simplified Google Map that renders region, markers, and text, instead of a full-fledged map with tiny details. The map is generated in SVG, and can be customized in many ways including changing the region colors, adding popup, and custom map markers.
Maplace, a jQuery plugin for generating map through the Google Maps API v3. Maplace works in all browsers, including IE6. So this is another great plugin worth of your attention if you want to build map in the easiest way possible.
Map Tools provides intuitive API to add Google Maps. It supports loading of geo-formatted JSON data such as TopoJSON and GeoJSON to render the map. On top of that, you can add animated markers that I think will make the map more lively, insert HTML content with variables or placeholders ala Handlebars.
OpenLayer come mobile ready out of the box, suitable for building maps across devices and browsers. You can use CSS for a different look of your map.
Developers gave Leaflet basic functions to work perfectly, keeping its size small, perfect for mobile devices. For specific functions, just extend Leaflet using plugins.
Leaflet has most online map features you need: tile layers, popup, markers, and free vector layers like polylines, polygons, circles or rectangles. It comes with nice default designs although you can customize the style using CSS3 with ease.
Leaflet has the most usage interaction features both for mobile and desktop browsers.