Archivo de la etiqueta: maps

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 –>

Google Maps: Mostrar una imagen con un mapa est谩tico

Hola a todos, para comenzar con este mini tutorial sobre el uso de google maps vamos a empezar por lo m谩s 聽b谩sico, como mostrar un mapa聽est谩tico a modo de imagen para mostrar por ejemplo donde nos encontramos localizados.

Esta es la manera m谩s f谩cil de mostrar nuestra localizaci贸n aunque al ser est谩tico est谩 limitado a mostrar 煤nicamente una localizaci贸n sin que se pueda interactuar con el mapa.

Para ello simplemente tenemos que a帽adir a nuestro html un elemento imagen y en el atributo src poner la url a la api de google de la siguiente manera:

<img 聽src=”http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&size=[Anchura]x[Altura]&markers=color:[color]|label:[letra]|[latitud,longitud]” />

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mapa est谩tico</title>
<meta charset="utf-8" />
</head>
<body>
 <h1>Ejemplo de mapa est谩tico</h1>
 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=color:yellow|43.2686751,-2.9340005" />
</body>
</html>

En este ejemplo mostramos una imagen con un mapa est谩tico que muestra la localizaci贸n del museo聽Guggenheim de Bilbao.

Como podemos observar 聽en el atributo src de la etiqueta img ponemos la url聽http://maps.googleapis.com/maps/api/staticmap聽y le pasamos los parametros que definen como debe de ser la imagen de mapa.

Con el par谩metro maptype le indicamos el tipo de mapa que tiene que mostrar, hay cuatro tipos de mapas disponibles en la API de Google Maps:

  • roadmap: especifica una imagen de mapa de ruta est谩ndar, la que normalmente se muestra en la p谩gina web de Google Maps. Este es el tipo de mapa predeterminado.
  • satellite: 聽muestra im谩genes de sat茅lite de Google Earth
  • hybrid: muestra una mezcla de vistas normales y de sat茅lite
  • terrain: muestra un mapa f铆sico basado en informaci贸n del terreno.

Con el par谩metro center le indicamos las coordenadas latitud y longitud en las que deseamos que est茅 centrado el mapa.

Con el par谩metro zoom le indicamos el grado de zoom (aumento) a aplicar sobre el mapa.

Con el par谩metro size mostramos el tama帽o (anchura x altura) de la imagen.

Con el par谩metro markers聽definimos los marcadores. Podemos definir el color, la posici贸n (latitud,logitud). Las diferentes opciones聽que acepta el par谩metro markers deben ir separadas por el car谩cter pipe ‘|’. Ademas del color y de la posici贸n se puede definir una letra a modo de etiqueta con la opci贸n label, tambi茅n se puede definir el icono con la opcion icon por ejemplo聽ejemplo:

<img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=cafe|43.2686751,-2.934000" />

Para terminar con el mapa est谩tico solo queda decir que podemos utilizar tantos marcadores como queramos a帽adiendo varios par谩metros markers por ejemplo:

 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon|color:yellow|43.2686751,-2.9340005&markers=color:blue|43.2686751,-2.9320005" />

Si ejecutamos en un navegador el ejemplo anterior聽se mostrar谩 en el navegador una imagen como esta:

Captura de pantalla 2016-01-03 a las 21.20.07

脥ndice 聽 – 聽Capitulo Siguiente –>