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/
