You are on page 1of 5

<%-Document : busquedainfo Created on : 28/09/2011, 12:39:50 AM Author : EDGAR --%> <html lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"

/> <title>Buscar informacion</title> <style type="text/css"> #message { color: red; text-align: center; } #data { width: 600px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; text-align: center; border: 2px solid orange; } #location { width: 400px; } #map { width: 600px; height: 500px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?s ensor=false&language=es"></script> <script type="text/javascript"> /** * The Google Geocoding API: http://code.google.com/apis/maps/documentation/ geocoding/index.html * Geocoding service: http://code.google.com/apis/maps/documentation/javascr ipt/services.html#Geocoding */ // Variables globales var map, geocoder; // Instancia del geocodificador

geocoder = new google.maps.Geocoder(); // Propiedades iniciales del mapa window.onload = function() { var options = { zoom: 5, center: new google.maps.LatLng(4, -72), mapTypeId: google.maps.MapTypeId.ROADMAP }; // Instancia del mapa map = new google.maps.Map(document.getElementById('map'), options); // Relacin del evento de clic en el botn con el // procedimiento de georreferenciacin document.getElementById('search').onclick = function() { // Obtiene la ubicacin (string) a georreferenciar var location = document.getElementById('location').value; // Inicia el proceso de georreferenciacin (asncrono) processGeocoding(location, addMarkers); // Detiene el procesamiento del evento return false; } } /** * Georreferenciar una ubicacin geogrfica * * @param location Ubicacin geogrfica * @param callback Funcin a ejecutarse despus de una georrefereciacin exit osa */ function processGeocoding(location, callback) { // Propiedades de la georreferenciacin var request = { address: location } // Invocacin a la georreferenciacin (proceso asncrono) geocoder.geocode(request, function(results, status) { /* * OK * ZERO_RESULTS * OVER_QUERY_LIMIT * REQUEST_DENIED * INVALID_REQUEST */

// Notifica al usuario el resultado obtenido document.getElementById('message').innerHTML = "Respuesta obtenida: " + status; // En caso de terminarse exitosamente el proyecto ... if(status == google.maps.GeocoderStatus.OK) { // Invoca la funcin de callback callback (results); // Retorna los resultados obtenidos return results; } // En caso de error retorna el estado return status; }); } /** * Agregar las ubicaciones georreferenciadas al mapa (marcadores) * * @param geocodes Listado de ubicaciones georreferenciadas */ function addMarkers(geocodes) { for(i=0; i<geocodes.length; i++) { // Centra el mapa en la nueva ubicacin map.setCenter(geocodes[i].geometry.location); // Valores iniciales del marcador var marker = new google.maps.Marker({ map: map, title: geocodes[i].formatted_address }); // Establece la ubicacin del marcador marker.setPosition(geocodes[i].geometry.location); // Establece el contenido de la ventana de informacin var infoWindow = new google.maps.InfoWindow(); content = "Ubicacin: " + geocodes[i].formatted_address + "<br />" + "Tipo: " + geocodes[i].types + "<br />" + "Latitud: " + geocodes[i].geometry.location.lat() + "<br />" + "Longitud: " + geocodes[i].geometry.location.lng();

document.writeln('<div>'+'<p>Latitud: '+geocodes[i].geo metry.location.lat()+' </p>'+'</div>'); infoWindow.setContent(content);

// Asocia el evento de clic sobre el marcador con el despliegue // de la ventana de informacin google.maps.event.addListener(marker, 'click', function(event) { infoWindow.open(map, marker); });

// infowindow.open(map, marker); } } </script> </head> <body> <h1>Busqueda de puntos especiales</h1> <div id="data"> <!-- Mensaje de estado --> <div id="message"></div> <!-- Ubicacin a georreferenciarse --> <label for="location">Busqueda:</label> <input type="text" id="location" name="location" value="" size="40" /> <!-- Botn para inciar la georreferenciacin --> <input type="button" id="search" name="search" value="Buscar" /> </div> <!-- Lugar de despliegue del mapa --> <div id="map"></div> <form name="entradaas"> <input type="text" name="latitudd" value="" /> <input type="text" name="longitudd" value="" /> <% if(request.getParameter("location")!=null){ } %> </form>

</body> </html>

You might also like