Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

However, things can always be simpler and GMaps.js, a feature-rich jQuery plugin, helps consuming Google Maps much easier.

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

And, it has callbacks on every action to integrate any custom events. GMaps.js is not documented in detail, however, it has examples of each feature.

JQVMap is a jQuery plugin for rendering vector maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany".

There are several customization options for beautifying the maps including colors, borders or their opacities.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Also, it is possible to select any regions on initial load or after any custom event.

The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

Here is how the end result will look like:

For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

Here's the order in which we'll cover things:

1. Get the basics out of the way
2. Connect to Pusher
3. Subscribe to new visitor page hits notifications
4. Get the visitor's location using the HTML5 Geolocation API
5. Broadcast the visitor location and page to all application visitors using Pusher
6. Display the visitor location and page information on a Google map

Read the rest of this entry »

jQuery Geo is a plugin for the popular framework that provides an easy-to-use API for map/geolocation related actions.

The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS (Open Street Map by default) for pulling the map data and can:

• show mapping data and handle direct user interaction with the map
• use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.

The maps created are mobile-friendly and have lots of built-in methods for customization.

jQuery Geo is very well-documented and supported with a bunch of examples.

Inserting Google Maps into web pages is already easy with the simplicity Google offers in all of their products.

However, things can get easier with GMAP3 jQuery plugin if you are planning to use maps with advanced features (like overlays or callbacks).

There are simplified functions provided for the popular uses of Google Maps API that would normally require much more coding like:

• getAddress – which returns a google.maps.GeocoderResult from a google.maps.LatLng
• getRoute – which returns a google.maps.DirectionsResult from a google.maps.DirectionsRequest

It is also possible to use the native Google maps functions within the plugin for maximum flexibility.

Leaflet is a JavaScript library for creating tile-based maps which work in both mobile and desktop browsers.

With a very easy-to-use API and OOP-based code, the library is modular and extensible.

It has support for features like drag panning, scroll wheel or double-click zoom, zooming animation, pure CSS3 pop-ups and more.

Leaflet is lightweight, very well-documented and supported with examples.

P.S. Although the examples on the resource page use only OpenStreetMap, other popular providers will work with the library as well.

MobilyMap is a jQuery plugin that can create a Google Maps-like, draggable interface from any image.

It is possible to add location-based markers and display information when any of these markers are clicked.

The map can be positioned how you prefer (like top, bottom-right, etc.) or by defining an exact location.

Map data is mentioned within HTML elements like: <div class="point" id="p-900-130"> which will assign a marker to the specified point.

The plugin has callback functions including onMarkerClick, onPopupClose and onMapLoad to better interact on every level.

CartoView is an open source and free JavaScript framework for creating online maps quickly.

It is integrated with Google Maps, Google Earth + OpenLayers and enables you to take control of the maps in means of function and presentation.

With the help of its modular architecture, the functionality can be improved without touching the core and there are already extension created like the ones for Flickr, FourSquare, Youtube and more.

The framework is well-documented and supported with examples.

Tile5 is an open source HTML5 mapping JavaScript library that enables developers to integrate existing mapping platforms for providing a rich HTML5 experience.

It is compatible with most of the mapping providers like Google, Bing, Yahoo, MapQuest and more.

Besides the API for mapping, the library is also functional for creating more generic tiling application interfaces.

With the compatibility HTML5 offers, Tile5 is targeted at both desktop and mobile browsers.

Tip: there are very nice demos offered to see the power of the library.

Polymaps is a free JavaScript library for creating dynamic and interactive maps.

Besides the usual cartography from OpenStreetMap, CloudMade, Bing, etc., it works with image-based and vector-tiled maps by providing a quick display of multi-zoom datasets over maps, and supports a variety of visual presentations.

As Polymaps can load data at a full range of scales, it’s a good fit for showing information from country level on down to states, cities, neighborhoods, and individual streets.

And, as it uses SVG to display information, you can use CSS rules to define the design of the data.