googlemaps

This plugins makes it easy to put a Google Map on your page. You will need a valid Google Maps API key from http://www.google.com/apis/maps/. Look at the source code of this page if you want to know how to use the plugin. Markers can be provided by a jQuery object (containing elements in the geo microformat) or an array of objects that provide lat, lng and txt for the popup (txt being optional).

Example

N 37 24.491 W 122 08.313
N 36 24.491 W 121 08.313

Source code

/* jQuery googleMap Copyright Dylan Verheul <dylan@dyve.net>
 * Licensed like jQuery, see http://docs.jquery.com/License
 */

$.googleMap = {
	maps: {},
	marker: function(m) {
		if (!m) {
			return null;
		} else if (m.lat == null && m.lng == null) {
			return $.googleMap.marker($.googleMap.readFromGeo(m));
		} else {
			var marker = new GMarker(new GLatLng(m.lat, m.lng));
			if (m.txt) {
				GEvent.addListener(marker, "click", function() {
    				marker.openInfoWindowHtml(m.txt);
  				});
			}
			return marker;
		}
	},
	readFromGeo: function(elem) {
		var latElem = $(".latitude", elem)[0];
		var lngElem = $(".longitude", elem)[0];
		if (latElem && lngElem) {
			return { lat:parseFloat($(latElem).attr("title")), lng:parseFloat($(lngElem).attr("title")), txt:$(elem).attr("title") }
		} else {
			return null;
		}
	},
	mapNum: 1
};

$.fn.googleMap = function(lat, lng, zoom, options) {

	// If we aren't supported, we're done
	if (!window.GBrowserIsCompatible || !GBrowserIsCompatible()) return this;

	// Default values make for easy debugging
	if (lat == null) lat = 37.4419;
	if (lng == null) lng = -122.1419;
	if (!zoom) zoom = 13;

	// Sanitize options
	if (!options || typeof options != 'object')	options = {};
	options.mapOptions = options.mapOptions || {};
	options.markers = options.markers || [];
	options.controls = options.controls || {};

	// Map all our elements
	return this.each(function() {
		// Make sure we have a valid id
		if (!this.id) this.id = "gMap" + $.googleMap.mapNum++;
		// Create a map and a shortcut to it at the same time
		var map = $.googleMap.maps[this.id] = new GMap2(this, options.mapOptions);
		// Center and zoom the map
       	map.setCenter(new GLatLng(lat, lng), zoom);
       	// Add controls to our map
       	for (var i = 0; i < options.controls.length; i++) {
	       	var c = options.controls[i];
	       	eval("map.addControl(new " + c + "());");
       	}
       	// If we have markers, put them on the map
       	var marker = null;
       	for (var i = 0; i < options.markers.length; i++) {
	       	if (marker = $.googleMap.marker(options.markers[i])) map.addOverlay(marker);
       	}
    });

};

« list of plugins