Aquí os dejo un clase sencilla de mootools que imprime un mapa y al hacer click o arrastrar la marca del mapa obtiene la dirección por sus coordenadas.
En el html sólo tendremos que tener una capa con id map_canvas:
<div id="map_canvas"></div>
Tenemos que obtener clave de google maps api para utilizar el mapa, y tras hacer la declaración del javascript del api de google tendremos que incluir también el framework de mootools.
La clase es muy sencilla, os animo a copiar y pegar para probar su funcionamiento. Es mi primera toma de contacto con mootools, codificando desde 0, y la verdad me está gustando.
var Gmap = new Class({
Implements: Options,
map: null,
center: null,
marker: null,
geocoder: null,
options: {
center:{
lat: 40.730885,
lng: -3.997383
},
zoom: 6,
map:{
container: 'map_canvas',
element: null,
width: 500,
height: 400
},
mapinterface:{
search: true,
infowindow: true,
name: 'gmap'
}
},
initialize: function(options){
this.setOptions(options)
this._drawInterface($(this.options.map.container));
this.map = new GMap2($(this.options.mapinterface.name));
this.geocoder = new GClientGeocoder();
this.center = new GLatLng(this.options.center.lat, this.options.center.lng);
this._drawMap();
},
_drawMap: function(){
if (GBrowserIsCompatible()) {
this.map.setCenter(this.center, this.options.zoom);
this.map.setUIToDefault();
this._addMapListener();
}
},
_drawInterface: function(element){
var map = new Element('div', {
'id': this.options.mapinterface.name,
'styles': {
'width': this.options.map.width,
'height': this.options.map.height
}
});
map.inject(element);
if(this.options.mapinterface.infowindow){
var infomap = new Element('div', {
'id': 'infomap',
'styles': {
'width': '500',
'height': '200'
}
});
infomap.inject(element);
}
},
_addMapListener: function(){
GEvent.addListener(this.map, "click", function(overlay, latlng){
this.map.closeInfoWindow();
this._createMarker(latlng);
}.bind(this))
},
_createMarker: function(latlng){
this.marker = new GMarker(latlng, {
draggable: true
});
this.map.clearOverlays();
this.map.addOverlay(this.marker);
this._addMarkerListener();
},
_addMarkerListener: function(){
GEvent.addListener(this.marker, "dragstart", function() {
this.map.closeInfoWindow();
}.bind(this));
GEvent.addListener(this.marker, "dragend",function(overlay,latlng){
//getAddress(overlay, latlng);
this.getAddress(this.marker.getLatLng());
//this.marker.setLatLng(latlng);
}.bind(this));
},
getAddress: function(latlng) {
if (latlng != null) {
this.geocoder.getLocations(latlng, this._showAddress);
}
},
_showAddress: function(response){
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
//console.log(response);
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
// marker = new GMarker(point);
var info = '<b>orig latlng:</b>' + response.name + '<br/>' +
'<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>Status Code:</b>' + response.Status.code + '<br>' +
'<b>Status Request:</b>' + response.Status.request + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode;
$('infomap').innerHTML = info;
}
}
});
window.addEvent('domready', function() {
var map = new Gmap();
});
Si tenéis alguna duda siempre podéis dejar un comentario.
Esta semana Gmail ha tenido algún que otro altibajo y eso ha dado mucho que pensar a algún que otro usuario que sufre google-dependencia. En cambio, lo primero que a mi me ha venido a la cabeza cuando otros se quejaban de que no les funcionaba su gmail ^_^ (del cual también soy usuario :-) ), que ocurriría si Google desapareciera de Internet.
Google siempre está ahi, velando por los intereses de todos para todos. La verdad es que se está “apoderando de internet” todavía no conozco “el competidor”. El Safe Browsing de google, nos dice que es lo que opina sobre el contenido web, y nos alerta en caso de que exista algún problema. Por el momento parece que mi URL no ha sido detectada como “maligno” pero… y tu pagina web, o las que sueles frecuentar…