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 –>
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),También puedes seguirme en Twitter en @revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.
Muy bueno, a partir de esto seguramente podríamos hacer un buscador de Calles? He intentado hacer eso en algún momento y no lo he logrado con la api de google. Pero no se si es ese el camino.Tengo un sitio de mapas de argentina, míralo si te interesa: http://mapa-maps.com.ar/ el sitio está orientado a mapas de lugares pero no descarto implementar diversos métodos de búsqueda.Voy a seguir mirando tu blog pues parece ser muy claro en ejemplos. Cordial saludo.
Gracias por comentar. Esta interesante tu sitio de mapas de Argentina, si algún día visito Argentina lo tendré en cuenta ;-). Por este método podemos situarnos en las coordenadas de un mapa a partir de una dirección, podría usarse para un buscador.
Un saludo
Buenas noches. Soy novato en esto, pero tengo un proyecto donde debo obtener las coordenadas de aprox. 300.000 direcciones de empresas de Bogotá-Colombia.
Me dicen que con uncódigo de R puedo hacerlo, pero no lo he logrado.
Pueden ayudarme?
Gracias. Mi correo es cabrera.diego@gmail.com
el codigo esta mal
Hola Kevin,
El código esta bien, lo único que si hacías copia-pega había que quitar el espacio que había después de la apertura de las etiquetas script. En cualquier caso he aprovechado para colorear el código y ahora ya puedes copiar y pegar el código directamente sin problemas.
Un saludo
Calidad tu script !!!
Hola Eduardo, gracias por facilitarnos el código en tu ejemplo, estoy haciendo pruebas y funciona CASI perfecto, no sé bien por qué pero las coordenadas que me devuelve al realizar la búsqueda tienen margen de error de unos 50 metros comparadas con las coordenadas que arroja una dirección directamente en maps.google.com, porqué puede ser?
Hola Alejandro, gracias por comentar, pues la verdad es que no se a que se puede deber, siento no poder darte una respuesta mejor.
Si algún lector puede aportar algo al respecto agradecería la aportación.
Un saludo
El tema de la precisión en las coordenadas está relacionado a que por defecto en JS la opción de maxima precisión se encuentra deshabilitada (false). Puedes habilitarla con el comando enableHighAccuracy
{
positionOptions.enableHighAccuracy = TRUE
}
Muchas gracias por el aporte Braulio 🙂
Gracias por el script, pero no logro hacer que funcione. No sé si es porque es algo antiguo? He añadido https://maps.google.com/maps/api/js?key=mi_key_del_sitio, pero sigue sin responder al introducir direcciones.
No me funciona el Script al ingresar la dirección…