JQuery plugin for Google Map API.

El siguiente código es un plugin escrito[1] para integrar el portal web de un cliente con las API de Google Map[2].

Código Fuente.

/**
 * jquery.gmaps.js
 *
 * Mapas - GoogleMap API plugin for jquery
 *
 * @depends jquery.js
 *
 * @author    Jorge Rodriguez Suarez
 * @copyright (c) Continuum 2008.
 * @version   $Id$
 *
 * All rights reserved by Continuum.
 *
 */
$.gMap = {
	maps: {},
	mapNum: 1
};
$.fn.gMap = function(zoom, options) {
// If we aren't supported, we're done
	if (!window.GBrowserIsCompatible || !GBrowserIsCompatible())
            return this;
// Default values make for easy debugging
	var lat = $(this).attr("latitude") || 0;
	var lng = $(this).attr("longitude") || 0;
	if (!zoom) zoom = 15;
// Sanitize options
	if (!options || typeof options != 'object') options = {};
	options.mapOptions = options.mapOptions || {};
	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" + $.gMap.mapNum++;
		// Create a map and a shortcut to it at the same time
		var map = $.gMap.maps[this.id] = new GMap2(this,
                    options.mapOptions);
		var latitude = parseFloat(lat);
		var longitude = parseFloat(lng);
var marker = new GMarker(new GLatLng(latitude, longitude));
        var html = '<div style="padding-right:10px;">'
            + $(this).attr("title") + '</div>';
// Center and zoom the map
       	map.setCenter(new GLatLng(latitude, longitude), zoom);
       	// add the title
        map.addControl(new GSmallMapControl());
        map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
        });
marker.openInfoWindowHtml(html);
// Add controls to our map
       	for (var i = 0; i < options.controls.length; i++) {
	       	var c = options.controls[i];
	       	eval("map.addControl(new " + c + "());");
       	}
    });
};
Ejemplo del uso:
Un div con la clase 'gmap', y los atributos title, latitude y longitude. Además un link con la clase 'btn-gmap'. A continuación el código.
<a href="javascript:void(0)" class="btn-gmap">Ver mapa</a>
...
<div style="display:none; border:1px solid gray; height: 300px;
width: 400px;" id="mapa1" class="gmap" title="Ejemplo de Mapa"
latitude="-33.443244"
longitude="-70.633434">
</div>
y por último el código que genera el evento sobre el link para mostrar el mapa en el div...
/**
 * gmaps.achs.js
 *
 * Mapas ACHS - GMaps integration
 *
 * @depends jquery.js, jquery.gmaps.js
 *
 * @author    Jorge Rodriguez Suarez
 * @copyright (c) Continuum 2008.
 * @version   $Id$
 *
 * All right reserved by Continuum.
 *
 */
$(document).ready(function() {
	$('.btn-gmap').click(function (e) {
		$(".gmap").fadeIn('slow').gMap(15, {
			mapOptions: ['enableScrollWheelZoom',
                            'enableDoubleClickZoom', 
                            'enableDragging'],
			controls: ['GSmallMapControl', 
                            'GMapTypeControl']
		});
		e.preventDefault();
	});
});
[1] Basado en un plugin de http://dyve.net/
 [2] http://code.google.com/intl/es-CL/apis/maps/