A jQuery Google Maps Plug-in example

Posted on by

jQuery Google Maps plug-in example. This code demonstrates how to achieve integrating a Google Map with custom Markers using jQuery. The two snippets here target jQuery 1.4.x and 1.5.x or higher respectively, but the html snippet further down the page can include either version of this plugin.

NOTE: You must include the jQuery UI library in order to use the newer version of this example plugin, as it relies on the jQuery.widget() call to construct itself.

jQuery 1.4.1 compatible:

/**
 * A generic jQuery Google (r) map plug-in. Requires inclusion of the following javascript file before being included:  http://maps.google.com/maps/api/js?sensor=false
 * http://www.alexventure.com
 * 
 * Copyright (c) Alexventure.com
 * Dual licensed under the MIT and GPL licenses. (Re)Use as you wish.
 * http://docs.jquery.com/License
 * 
 * Date: 2011-09-07 23:32:00 -0700 (Wed, 07 Sep 2011)
 * Revision: 0001
 */
/**
 * The 'points' variable contains an indexed array of objects containing marker data:
 * 
 * [
 *	{
 *		text: '<span>Boudin Bakery at Embarcadero</span><br /><p>Go upstairs for the Boudin Bakery restaurant, and order a clam chowder!</p>',
 *		lat: '37.795203',
 *		lng: '-122.395849'
 *	},
 *	{
 *		text: '<span>Gott's Roadside</span><br />Delicious burgers and more!</p>',
 *		lat: '37.77493',
 *		lng: '-122.419416'
 *	},
 *	...
 * ]
 */
(function(jQuery) {
	var widget = null;
 
	var methods = {
		"_create": function (settings) {
			if (settings) {
				jQuery.extend(options, settings);
			}
			widget.html('<div class="ui-gmap-container"></div>');
 
			methods._initGmap();
 
			// Load the map data and render.
			methods.load();
 
		},
		"_initGmap": function () {
			var elem = widget;
 
			// Set up the map options.
			var gmapOptions = {
				center: new google.maps.LatLng(options.center_lat, options.center_lng),
				size: new google.maps.Size(options.map_width, options.map_height),
				zoom: options.map_zoom,
				mapTypeId: google.maps.MapTypeId.HYBRID,
				mapTypeControl: true,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
					mapTypeIds: [
						google.maps.MapTypeId.ROADMAP,
						google.maps.MapTypeId.SATELLITE,
						google.maps.MapTypeId.HYBRID
					]
				}
			};
			// Create the map object with the raw DOM element and our options.
			var map = new google.maps.Map( document.getElementById( elem.attr('id') ), gmapOptions);
 
			options.gmap = map;
		},
		"load": function () {
			var map = options.gmap;
			var points = options.points;
			var bounds = new google.maps.LatLngBounds();
			var infoWin = null;
			var gmap_min_markers = options.gmap_min_markers;
 
			// Set up the markers.
			if (points != null && points.length > 0)
			{
				// Cycle through each point, and create a marker on the map.
				for (i = 0; i < points.length; i++){
					var point = points[i];
					var gmapPoint = new google.maps.LatLng(point.lat, point.lng);
					var marker = new google.maps.Marker({
						position: gmapPoint,
						map: map
					});
 
					// Set up the marker event handler.
					(function (i, map, marker, point) {
 
						google.maps.event.addListener(marker, 'click', function () {
							if (!infoWin) {
								infoWin = new google.maps.InfoWindow();
							}
							// Show balloon when clicked.
							var content = '<div id="info">' + point.text + '</div>';
 
							infoWin.setContent( content );
							infoWin.open(map, marker);
						});
					})(i, map, marker, point);
 
					// ...We're going to track these in order to adjust the map...
					bounds.extend(gmapPoint);
				};
 
				// Have the map adjust itself.
				if (points.length < gmap_min_markers) {
					if (points.length <= 0) {
						map.setZoom(1);
						map.setCenter(map.center);
					} else {
						map.setZoom(11);
						map.setCenter(map.center);
					}
				} else {
					map.fitBounds(bounds);
				}
			}
		}
	};
 
	var options = {
		"points": null,
		"center_lat": "37.795203",
		"center_lng": "-122.395849",
		"map_width": 500,
		"map_height": 400,
		"map_zoom": 4,
		"gmap": null,
		"gmap_min_markers": 2
	};
 
	jQuery.fn.gmap = function (settings) {
		widget = jQuery(this);
 
		if (methods[settings]) {
			return methods[ settings ].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if ( typeof settings == 'object' || !settings) {
			return methods._create.apply(this, arguments);
		} else {
			jQuery.error('Method' + settings + ' does not exist in jQuery.gmap');
		}
	}
})(jQuery);

jQuery 1.5.x or Higher

/**
 * A generic jQuery Google (r) map plug-in. Requires https://maps.google.com/maps/api/js?sensor=false
 * http://www.alexventure.com
 * 
 * Copyright (c) Alexventure.com
 * Dual licensed under the MIT and GPL licenses. (Re)Use as you wish.
 * http://docs.jquery.com/License
 * 
 * Date: 2011-09-07 23:32:00 -0700 (Wed, 07 Sep 2011)
 * Revision: 0001
 */
jQuery.widget('ui.gmap', {
	"options": {
		"points": null,
		"center_lat": "37.795203",
		"center_lng": "-122.395849",
		"map_width": 500,
		"map_height": 400,
		"map_zoom": 4,
		"gmap": null,
		"gmap_min_markers": 2
	},
	"_create": function () {
			var widget = this;
			var element = jQuery(widget.element);
 
			element.html('<div class="ui-gmap-container"></div>');
 
			this._initGmap();
 
			// Load the map data and render.
			this.load();
 
		},
		"_initGmap": function () {
			var elem = jQuery(this.element);
			var options = this.options;
 
			// Set up the map options.
			var gmapOptions = {
				center: new google.maps.LatLng(options.center_lat, options.center_lng),
				size: new google.maps.Size(options.map_width, options.map_height),
				zoom: options.map_zoom,
				mapTypeId: google.maps.MapTypeId.HYBRID,
				mapTypeControl: true,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
					mapTypeIds: [
						google.maps.MapTypeId.ROADMAP,
						google.maps.MapTypeId.SATELLITE,
						google.maps.MapTypeId.HYBRID
					]
				}
			};
			// Create the map object with the raw DOM element and our options.
			var map = new google.maps.Map( document.getElementById( elem.attr('id') ), gmapOptions);
 
			this.options.gmap = map;
		},
		"load": function () {
			var options = this.options;
			var map = options.gmap;
			var points = options.points;
			var bounds = new google.maps.LatLngBounds();
			var infoWin = null;
			var gmap_min_markers = options.gmap_min_markers;
 
			// Set up the markers.
			if (points != null && points.length > 0)
			{
				// Cycle through each point, and create a marker on the map.
				for (i = 0; i < points.length; i++){
					var point = points[i];
					var gmapPoint = new google.maps.LatLng(point.lat, point.lng);
					var marker = new google.maps.Marker({
						position: gmapPoint,
						map: map
					});
 
					// Set up the marker event handler.
					(function (i, map, marker, point) {
 
						google.maps.event.addListener(marker, 'click', function () {
							if (!infoWin) {
								infoWin = new google.maps.InfoWindow();
							}
							// Show balloon when clicked.
							var content = '<div id="info">' + point.text + '</div>';
 
							infoWin.setContent( content );
							infoWin.open(map, marker);
						});
					})(i, map, marker, point);
 
					// ...We're going to track these in order to adjust the map...
					bounds.extend(gmapPoint);
				};
 
				// Have the map adjust itself.
				if (points.length < gmap_min_markers) {
					if (points.length <= 0) {
						map.setZoom(1);
						map.setCenter(map.center);
					} else {
						map.setZoom(11);
						map.setCenter(map.center);
					}
				} else {
					map.fitBounds(bounds);
				}
			}
		}
});

And finally, here is the sample HTML. Just drop the plugin and the HTML file in the same folder, and open the HTML file in your favorite browser:

<html>
	<head>
		<title>A jQuery Google Maps plug-in example.</title>
		<!-- Google Maps API (javascript) -->
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
 
		<!-- jQuery 1.6.3 -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
		<!-- jQuery UI 1.8.16 -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
 
		<script type="text/javascript" src="jquery.gmap.js"></script>
		<script type="text/javascript">
 
			jQuery(document).ready(function ($) {
				$('#the_map_element').gmap({
					"map_width": 500,
					"map_height": 500,
					"points": [
						{
					 		text: "<span>Boudin Bakery at Embarcadero</span><br /><p>Go upstairs for the Boudin Bakery restaurant, and order a clam chowder!</p>",
					 		lat: '37.795203',
					 		lng: '-122.395849'
					 	},
						{
					 		text: "<span>Gott's Roadside</span><br />Delicious burgers and more!</p>",
					 		lat: '37.77493',
					 		lng: '-122.419416'
					 	}
					]
				});
			});
 
		</script>
	</head>
	<body>
		<div id="the_map_element" style="width: 500px; height: 500px;">
		</div>
	</body>
</html>

Here is the sample code as a TAR.GZ archive for your convenience: jQuery_GoogleMaps_Example.tar.gz

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">