Pensando en Red nada es tan fácil como parece serlo

Google Maps API con Mootools

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.