Best jQuery Maps Plugins & Tutorials with Demo

    jQuery Rockstar Map plugin

    May 12, 2012 | Maps, Plugins, Premium
    jQuery Rockstar Map plugin

    Rockstar Map is a jQuery plugin for displaying an interactive map with locations, navigation and more. It’s perfect for any Contacts page and it’s super easy to setup and use. It has features like fullscreen mode, smooth animations, inertia, fluid width, touch gestures and a beautiful interface that is visible and reads well with any image in the background.

    Rockstar Map is designed with mobile devices in mind from the ground up! It’s fully responsive, the width dynamically changes when the viewport is resized (when the device goes in landscape mode), and it remains responsive in fullscreen mode as well.

    Finger gestures are also supported! The map is even more intuitive to use on a touchscreen device, because of that. Pinch to zoom, tap and move to navigate around – it’s all there.

    Read More Demo

    Kartograph : jQuery Interactive map applications without Google Maps

    May 5, 2012 | jSON, Maps, SVG Tutorial
    Kartograph : jQuery Interactive map applications without Google Maps

    Kartograph is a new 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.

    The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

    Read More Demo

    MapQuery : jQuery Map plugin with Demo

    April 12, 2012 | jSON, Maps, Plugins
    MapQuery : jQuery Map plugin with Demo

    MapQuery is a jQuery plugin that you can use to add mapping to your website. Whether you quickly want to add a simple map to a page, or build a feature rich web application, MapQuery is just the thing you need.

    Read More Demo

    Leaflet : JavaScript library for mobile-friendly interactive maps

    March 20, 2012 | Core Java Script, HTML5, Maps
    Leaflet : JavaScript library for mobile-friendly interactive maps with Demo

    Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade to form the core of its next generation JavaScript API. Weighing just about 21kb of gzipped JS code, it still has all the features you will ever need for your web mapping needs, while providing a fast, smooth, pleasant user experience.

    It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, utilizing cutting-edge technologies included in HTML5 and CSS3. The focus is on usability, performance, small size, A-grade browser support, flexibility and an easy-to-use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.

    Read More Demo

    goMap : jQuery Map Plugin

    March 17, 2012 | Ajax, jSON, Maps, Plugins
    goMap : jQuery Map Plugin with Example

    gomap is a jquery map plugin.

    Read More Demo

    jQuery and HTML5 Interactive Map : MigrationsMap

    February 27, 2012 | HTML5, jSON, Maps, Plugins
    jQuery and HTML5 Interactive Map : MigrationsMap

    Interactive map of the origin-destination stocks by country.The map allows you to see for every country X in the world either the top ten providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from X. On top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita, the HIV and Tuberculosis prevalences and the death rate of children under five.

    Read More Demo

    Add automatic area highlighting to image Maps with javascript : Mapper.js

    February 14, 2012 | Core Java Script, Maps, SVG Tutorial
    Add automatic area highlighting to image Maps with javascript : Mapper.js

    mapper.js allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).

    Read More Demo

    jQuery Mapz

    January 19, 2012 | Drag & Drop, Maps, Plugins, Zoom
    jQuery Mapz

    With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.This plugin lets you create draggable image maps.

    Features

    • Draggable map which means there are no image dimension limits.
    • Zooming, no limit on the number of zooming levels.
    • Zoom by arrow keys or by mousewheel (note: when using zoom by mousewheel, you’ll need Brandon Aaron’s mousewheel plugin)
    • Use HTML <map> elements to create links inside your image maps. Let the plugin create multiple image maps for the different zooming levels.
    Read More Demo

    Address Picker: Display Real Time Map Location in jQuery

    January 9, 2012 | Maps, Other API, Plugins
    Address Picker: Display Real Time Map Location

    Address Picker is a jQuery plugin with autocomplete and location on map features. It displays map for the selected address, even while you navigate in autocomplete suggestions.Autocomplete filled by Google Map Geocoder suggestions.

    Read More Demo

    jQuery ExCanvas World Map

    December 31, 2011 | Maps, Plugins
    jQuery ExCanvas World Map

    Google Analytics has an excellent map of the world showing where your website visitors come from.While I can’t ever hope to compete with Google’s product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Ignoring the “clickable” nature of Google’s map at this stage (I’ll tackle that another day), dynamically drawing a map in a web browser isn’t so easy. Naturally, I thought Flash would be the answer but, never one for doing things the easy way, I wanted to try doing this directly in HTML’s <canvas> tag.

    Read More Demo