Google maps jQuery plugin extend with pagination

Using jquery with Google maps

Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.extensions.js"></script>

An example of how to extend the plugin with a simple pagination (see jquery.ui.gmap.extensions.js).

( function($) {
	$.extend($.ui.gmap.prototype, {
		pagination: function(prop) {
			var $el = $("<div id='pagination' class='pagination'><div class='back-btn'></div><div class='display'></div><div class='fwd-btn'></div></div>");
			var self = this, i = 0, prop = prop || 'title';
			self.set('pagination', function(a, b) {
				if (a) {
					i = i + b;
					$el.find('.display').text(self.get('markers')[i][prop]);
					self.get('map').panTo(self.get('markers')[i].getPosition());
				}
			});
			self.get('pagination')(true, 0);
			$el.find('.back-btn').click(function() {
				self.get('pagination')((i > 0), -1, this);
			});
			$el.find('.fwd-btn').click(function() {
				self.get('pagination')((i < self.get('markers').length - 1), 1, this);
			});
			self.addControl($el, google.maps.ControlPosition.TOP_LEFT);			
		}
	});
} (jQuery) );

After extending the plugin, just add some markers and call $('#map_canvas').gmap('pagination');

$('#map_canvas').gmap({'disableDefaultUI':true,'zoom':5}).bind('init', function(ev, map) {
	$('#map_canvas').gmap('addMarker', 
		{
			'position': '57.7973333,12.0502107', 
			'title': 'Something to show'
		}
	).click(function() {
		$('#map_canvas').gmap('openInfoWindow', {'content': this.title}, this);
	});
}).gmap('pagination');