New version of the Gmaps client side script.

gmaps.js

/**
 * Copyright 2010 Bohac Vaclav
 *
 * This library is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 */


/**
 * @preserve
 * @author    Vaclav Bohac <[email protected]>
 * @package   Gmaps 2.0
 * @license   GNU\GPLv3
 */

(function ( global, doc, undefined ) {

	/** @var {Object} Google Map Object */
	var map = null;



	/**
	 *  Request data from 'link'.
	 *
	 *  Makes XHR to the server and requests payload with
	 *  information about center of the map, positions and so.
	 *  
	 *  Triggers 'onRequest' event when finished.
	 *
	 *  @param  {string} link  URI to the server
	 */
	var request = function ( link ) {
		var LatLng  = google.maps.LatLng,
		    MapType = google.maps.MapTypeId;

		jQuery.get( link, function ( payload ) {
			var data = payload.data,
			    options = {
				center: new LatLng( data.center.lat, data.center.lng ),
				zoom: 8,
				mapTypeId: MapType[ data.type ]
			    };

			triggerCustomEvent( "onRequest", {
				options: options,
				markers: data.markers	
			});
		});
	};



	/**
	 * Create and trigger custom event.
	 *
	 * Event will be triggered on the 'doc' element.
	 *
	 * With the second parameter you can augment 
	 * standard jQuery event.
	 *
	 * @param  {string} type  type of the event
	 * @param  {Object} obj   extension to the event
	 */
	var triggerCustomEvent = function ( type, obj ) {
		var evt = new jQuery.Event( type );

		if ( obj !== undefined && !jQuery.isEmptyObject( obj ) ) {
			jQuery.extend( evt, obj );	
		}

		jQuery( doc ).trigger( evt );
	};



	/**
	 * Gmaps object.
	 *
	 * This is the only object which is visible from outside.
	 *
	 * If you would like to modify Google Map, use events.
	 *
	 * @var {Object} Gmaps
	 */
	var Gmaps = {

		/**
		 * Initialization of Gmaps.
		 *
		 * @param {Element} elem  canvas element for Google Map
		 * @param {string}  link  link to load JSON data from
		 */
		init: function ( elem, link ) {
			var _this = this,
			    onRequest = _this.onRequest;
			
			onRequest(function ( evt ) {
				_this.createMap( elem, evt.options || {} );
			});

			onRequest(function ( evt ) {
				var markers = evt.markers,
				    length = markers.length,
				    i;

				for ( i = 0; i < length; i += 1 ) {
					_this.createMarker( markers[ i ] );
				}
			});

			request( link );
		},

		/**
		 * Create new Google Map.
		 *
		 * Will be assigned to the closured map variable.
		 *
		 * @param {Element} canvas  canvas element for Google Map
		 * @param {Object}  options object with configuration
		 */
		createMap: function ( canvas, options ) {
			map = new google.maps.Map( canvas, options );
		},

		/**
		 * Create new Marker.
		 *
		 * Adds new marker to the closured map variable.
		 *
		 * @param {Object} coords object wit langtitude and longtitude
		 */
		createMarker: function ( coords ) {
			var options = {
				map: map,
				position: new google.maps.LatLng( coords.lat, coords.lng )
			};

			var marker = new google.maps.Marker( options );
		},

		/**
		 * Add new event handler.
		 *
		 * Will be triggered after XHR request to the backend server
		 * with special augmented event with requested data.
		 *
		 * @param {Function} handler  event handler
		 */
		onRequest: function ( handler ) {
			jQuery( doc ).bind( "onRequest", handler );
		}

	};



	// Attach Gmaps to the global (window) object.	
	global.Gmaps = Gmaps;

}( window, window.document ));



/**
 * This will start all the fun.
 *
 * Gets data from server and creates all the markers,
 * directions and polygons.
 *
 * If you don't want to execute Gmaps, remove this call.
 */
jQuery( document ).ready(function () {
	var canvas = document.getElementById( "gmap" ),
	    link = jQuery( canvas ).data( "link" );

	Gmaps.init( canvas, link );
});