Obtener Coordenadas a partir de una direcci贸n

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.

12 comentarios en “Obtener Coordenadas a partir de una direcci贸n

  1. 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.

    1. 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

  2. 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

    1. 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

  3. 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?

    1. 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

  4. 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
    }

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.