El código de la página es algo como:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="css/v1/nioos.css" rel="stylesheet" />
<script type="text/javascript" src="js/v1/nioosapp.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<title>Nioos</title>
</head>
<body>
<div>
<label>Dirección :</label>
<input id="direccion" type="text" />
<input type="button" value="Buscar" onclick="geolocalizar()" />
</div>
<div id="mapa"></div>
<script type="text/javascript">
initApp();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<link href="css/v1/nioos.css" rel="stylesheet" />
<script type="text/javascript" src="js/v1/nioosapp.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<title>Nioos</title>
</head>
<body>
<div>
<label>Dirección :</label>
<input id="direccion" type="text" />
<input type="button" value="Buscar" onclick="geolocalizar()" />
</div>
<div id="mapa"></div>
<script type="text/javascript">
initApp();
</script>
</body>
</html>
El elemento
<input id="direccion" type="text" />
representa el campo de texto para introducir la dirección que queremos "geocodificar". El elemento
<input type="button" value="Buscar" onclick="geolocalizar()" />
es el botón que al ser apretado realizará esta "geocodificación" mediante la función javascript "geolocalizar()" en el evento "onclick". El código javascript es algo como:
var nioos = {};
function initApp() {
var divMapa = document.getElementById("mapa");
var madrid = new google.maps.LatLng(40.416691, -3.700345);
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: madrid
};
var map = new google.maps.Map(divMapa, myOptions);
nioos.map = map;
//
var geocoder = new google.maps.Geocoder();
nioos.geocoder = geocoder;
}
function geolocalizar() {
var direccion = document.getElementById("direccion").value;
nioos.geocoder.geocode(
{
'address': direccion
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
nioos.map.setCenter(location);
} else {
alert('Dirección ' + direccion + ' desconocida');
}
}
);
}
El código
var nioos = {};
inicializa un objecto javascript que iremos usando en toda nuestra aplicación. La función
initApp()
crea y "pinta" el mapa inicial centrado en las coordenadas de Madrid y crea también el "geolocalizador" de Google Map ("var geocoder = new google.maps.Geocoder();") guardando ambos en el objeto "nioos" para su posterior uso.La función
geolocalizar()
recoge el texto escrito en el cuadro de búsqueda ("var direccion = document.getElementById("direccion").value;") y se usa el "geocoder" para transformar ese texto a una latitud y longitud (función "geocode()" con el parámetro "address") y centrar el mapa ("nioos.map.setCenter(location);") en esa nueva localización.
No hay comentarios:
Publicar un comentario