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.
Mi primer programa: Hola Mundo!
De todos es sabido que cuando comienzas a programar un lenguaje el primer programa que se realiza es el "Hola Mundo!" para comprobar como compilar y como funciona más o menos el interfaz de desarrollo. Me he encontrado en Wikipedia un Hola Mundo en muchisimos por no decir casi todos los lenguajes de programación.
http://es.wikipedia.org/wiki/Hola_mundo
Así podréis comprobar si está el lenguaje que vosotors utilizais o comprobar la sintaxis de lenguajes a los que os gustaría echarles el guante ^_^
Hola Mundo!
Validar DNI con Javascript
En algunos desarrollos web tenemos que dar importancia al DNI que tiene que introducir el usuario. Aunque la validación del DNI también lo deberíamos comprobar antes de introducirlo en la Base de Datos.
Esta función comprueba que la letra del DNI sea la correcta.
<html>
<head>
<script type="text/javascript">
function nif(dni) {
numero = dni.substr(0,dni.length-1);
let = dni.substr(dni.length-1,1);
numero = numero % 23;
letra='TRWAGMYFPDXBNJZSQVHLCKET';
letra=letra.substring(numero,numero+1);
if (letra!=let) {
alert('Dni erroneo');
}else{
alert('Dni correcto');
}
}
</script>
</head>
<body>
DNI: <input type="text" name="dni" id="dni"/>
<input type="button" value="Comprobar DNI" onclick="nif(document.getElementById('dni').value)"/>
</body>
</html>