Como obtener las coordenadas de una dirección con Google maps

Tutorial: Como obtener las coordenadas de una dirección con Google maps

Buenos días, en este artículo voy a explicar como obtener las coordenadas de una dirección utilizando la API de Google maps.

Para realizar la conversión de coordenadas a dirección utilizaré el objeto Geocoder. El objeto Geocoder tiene otras utilidades como por ejemplo traducir direcciones en coordenadas, por lo tanto podemos concluir diciendo que el objeto geocorder es el encargado de la traducción de coordenadas a direcciones y viceversa.

Google no impone a todos los desarrolladores que quereamos utilizar el servicio de Geocoding incluir un mapa de Google en nuestra web.

Ejemplo: Obtener las coordenadas de una dirección (escrita en un input text), centrar la localización del mapa en pantalla y mostrar un marker.

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(-34.397, 150.644);
 var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
 var address = document.getElementById("address").value;
 geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       map.setCenter(results[0].geometry.location);
       var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
       });
    } else {
       alert("Geocode was not successful for the following reason: " + status);
    }
 });
}
</script>

---

Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Como dibujar rutas en Google maps

Tutorial PHP: Como dibujar rutas en google maps

Google maps es el servicio de mapas de Google que ofrece imágenes vía satélite de todo el planetas junto con mapas de casi todas las ciudades de aquellos países que han colaborado y permiten que Google muestre a los millones de usuarios que utilizan este servicio gratuito de Google.

A continuación mostraremos un ejemplo práctico sobre como dibujar rutas en Google maps utilizando coordenadas o direcciones indistintamente.

Ejemplo: Como dibujar rutas en Google maps.

Para realizar el ejemplo sobre como dibujar rutas en Google maps utilizaremos dos clases básicas:

DirectionsService y DirectionsRenderer : Donde la primera es la que realiza la petición del servicio al servidor y devuelve los datos y la segunda la encargada de mostrar la ruta seleccionada en nuestro mapa.

1) En primer lugar deberemos inicializar:

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

2) En segundo lugar crearemos un objeto del tipo Request de la siguiente manera:

var request = {
 origin:start,
 destination:end,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};

3) En tercer lugar llamamos a la función que dibuja la ruta en Google maps
directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setMap(map);
      var mystr="";
      for(var i in result.routes){
         var mylegs=result.routes[i].legs
         for(var j in mylegs){
            mystr += mylegs[j].distance.text;
            mystr += " " + mylegs[j].duration.text+ " <br/> ";
         }
         mystr+=" <br/>";
         $(“#infoRecorrido).html(mystr);
      }
      directionsDisplay.setDirections(result);
   }
});

4) En este punto ya tenemos el ejemplo finalizado y estamos en disposición de dibujar rutas en Google maps.

El resultado de dibujar rutas con Google maps es el siguiente:

---

Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha