En el anterior post vimos como obtener una direcci贸n a partir de unas coordenadas, en esta ocasi贸n vamos a realizar el proceso contrario.
Vamos a obtener unas coordenadas a partir de una direcci贸n en formato texto.
Una vez m谩s vamos a crear un ejemplo para ilustrar mejor como funciona y las posibilidades que ofrece.
En el ejemplo que os propongo vamos a mostrar un mapa y una caja de texto donde introduciremos la direcci贸n que deseamos buscar, al pulsar e el bot贸n el mapa se centrar谩 en esa direcci贸n mostrando en ella el marcador.
veamos el c贸digo que necesitamos para conseguir esto:
<!DOCTYPE html> <html lang="es"> <head> <title>Obtener Coordenadas a partir de una direcci贸n</title> <meta charset="utf-8" /> <script type="text/javascript" src="https://maps.google.com/maps/api/js"></script> <script> mapa = { map : false, marker : false, initMap : function() { // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar. mapa.map = new google.maps.Map(document.getElementById('mapa'), { center: {lat: 43.2686751, lng: -2.9340005}, scrollwheel: false, zoom: 14, zoomControl: true, rotateControl : false, mapTypeControl: true, streetViewControl: false, }); // Creamos el marcador mapa.marker = new google.maps.Marker({ position: {lat: 43.2686751, lng: -2.9340005}, draggable: true }); // Le asignamos el mapa a los marcadores. mapa.marker.setMap(mapa.map); }, // funci贸n que se ejecuta al pulsar el bot贸n buscar direcci贸n getCoords : function() { // Creamos el objeto geodecoder var geocoder = new google.maps.Geocoder(); address = document.getElementById('search').value; if(address!='') { // Llamamos a la funci贸n geodecode pasandole la direcci贸n que hemos introducido en la caja de texto. geocoder.geocode({ 'address': address}, function(results, status) { if (status == 'OK') { // Mostramos las coordenadas obtenidas en el p con id coordenadas document.getElementById("coordenadas").innerHTML='Coordenadas: '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng(); // Posicionamos el marcador en las coordenadas obtenidas mapa.marker.setPosition(results[0].geometry.location); // Centramos el mapa en las coordenadas obtenidas mapa.map.setCenter(mapa.marker.getPosition()); agendaForm.showMapaEventForm(); } }); } } } </script> </head> <body onload="mapa.initMap()"> <h1>Obtener Coordenadas a partir de una direcci贸n</h1> <div id="mapa" style="width: 450px; height: 350px;"> </div> <div><p id="coordenadas"></p></div> <input type="text" id="search"> <input type="button" value="Buscar Direcci贸n" onClick="mapa.getCoords()"> </body> </html>
Como Podemos observar el proceso es muy parecido al mostrado en la entrada聽Obtener la direcci贸n a partir de unas coordenadas聽con la diferencia de que en esta ocasi贸n le pasamos a geodecoder como par谩metro la direcci贸n en lugar de las coordenadas, y en la funci贸n callback que le pasamos recibimos las coordenadas en聽results[0].geometry.location.
Como necesitamos tener acceso a la variable map, y a la variable marker desde la funci贸n getCoords y no es buena practica crear variables globales, hemos creado un objeto llamado mapa para proteger el espacio de nombres y dentro hemos definido las dos variables y las dos funciones. Como ya sabemos initMap se llama en el evento onload del body, y getCoords al pulsar el bot贸n de buscar, 聽como est谩n dentro del objeto mapa tenemos que a帽adirles mapa. por delante para ejecutarlas.
Con este sencillo c贸digo obtenemos un potente buscador utilizando la api de google maps.
脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>