Geolocation y Api Google Maps JavaScript. Ejemplos. Insertar mapas interactivos, satélite. Efectos (CU01197E)

Resumen: Entrega nº97 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01197E

 

 

GEOLOCALIZACIÓN Y MAPAS CON JAVASCRIPT

En los últimos años ha tenido un gran auge el uso de mapas interactivos, sistemas de información geográfica, aplicaciones para smartphones que ayudan a calcular rutas o que muestran información sobre una ciudad o un monumento basándose en la localización geográfica. Existen herramientas JavaScript preparadas para aplicaciones de este tipo.

logo javascript

 

Las herramientas que incorporan los navegadores modernos relacionadas con geolocalización se han llamado “Api geolocation”. Los navegadores modernos junto con herramientas que facilitan empresas como Google dan pie a que los programadores puedan incorporar esta potencialidad en desarrollos web y apps para smartphones.

 

 

EL OBJETO NAVIGATOR.GEOLOCATION

El objeto navigator.geolocation nos facilita métodos para trabajar con la geolocalización del usuario. Tener en cuenta que muchos navegadores están configurados para impedir que se aplique la geolocalización (detección de la ubicación del usuario) por motivos de privacidad. Por tanto los resultados obtenidos pueden ser:

a) Podemos obtener la geolocalización (el usuario tiene configurado el navegador para permitirlo).

b) La geolocalización se obtiene sólo si después de que se pida permiso al usuario para facilitar su localización, el usuario da una respuesta positiva.

c) No se puede obtener la geolocalización (el usuario tiene configurado el navegador para no permitirlo).

Método de navigator.geolocation

Descripción aprenderaprogramar.com

getCurrentPosition (funcionDeProceso, funcionDeError, configuration)

Devuelve la información sobre la localización del navegador. Sólo es obligatorio incluir la funcionDeProceso. Esta función es la función que recibirá como parámetro la información de geolocalización devuelta por el método. Si se incluye funcionDeError, esta es la función a la que se enviará un objeto de tipo PositionError que lleva la información relativa al error que se ha producido. El parámetro configuration permite pasar un objeto con información de configuración relacionada con la geolocalización (como enableHigAccuracy para obtener máxima precisión, timeout para indicar el tiempo máximo de espera ó maximumAge para indicar el tiempo máximo que se almacenarán ubicaciones obtenidas en caché).

watchPosition (funcionDeProceso, funcionDeError, configuration)

Revisa la localización del navegador periódicamente e informa sobre cambios en la localización. Sólo es obligatorio incluir la funcionDeProceso. Esta función es la función que recibirá como parámetro la información de geolocalización devuelta por el método. Este método está pensado para smartphones o tablets donde el usuario se va desplazando y cambiando su localización.

clearWatch(id)

El valor de retorno de watchPosition puede ser almacenado en una variable de la misma forma que se hacía con setInterval(). La vigilancia puede detenerse usando el método clearWatch de forma similar a como se usa el clearInterval.

 

 

Veamos brevemente un ejemplo que nos dé una idea de qué es y para qué sirve geolocation. Escribe este código en en editor de textos y guárdalo con un nombre de archivo como ejemplo1.html:

<!DOCTYPE html>

<html lang="es">

<head><meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title>

<script type="text/javascript">

function iniciar(){

var boton=document.getElementById('obtener');

boton.addEventListener('click', obtener, false);

}

 

function obtener(){navigator.geolocation.getCurrentPosition(mostrar, gestionarErrores);}

 

function mostrar(posicion){

var ubicacion=document.getElementById('localizacion');

var datos='';

datos+='Latitud: '+posicion.coords.latitude+'<br>';

datos+='Longitud: '+posicion.coords.longitude+'<br>';

datos+='Exactitud: '+posicion.coords.accuracy+' metros.<br>';

ubicacion.innerHTML=datos;

}

 

function gestionarErrores(error){

alert('Error: '+error.code+' '+error.message+ '\n\nPor favor compruebe que está conectado '+

'a internet y habilite la opción permitir compartir ubicación física');

}

 

window.addEventListener('load', iniciar, false);

 

</script>

</head>

<body>

<div id="localizacion">

<button id="obtener" style="margin:30px;">Obtener mi localización</button>

</div>

</body>

</html>

 

 

El resultado esperado depende de la configuración del usuario: si el usuario admite facilitar su ubicación el resultado obtenido será del tipo:

Latitud: 67.3409361

Longitud: -52.9290236

Exactitud: 44 metros.

 

 

Estos valores reflejan la posición geográfica del usuario. Podemos hacer uso de ellos por ejemplo para mostrar un mapa de la zona donde se encuentra el usuario. Esto lo haríamos modificando el código anterior de la siguiente manera:

<tdvalign="top">function mostrar(posicion){var ubicacion=document.getElementById('localizacion');var mapurl='http://maps.google.com/maps/api/staticmap?center='+posicion.coords.latitude+','+posicion.coords.longitude+'&zoom=12&size=800x600&sensor=false&markers='+posicion.coords.latitude+','+posicion.coords.longitude;ubicacion.innerHTML='<img src="'+mapurl+'">';}

 

 

Ahora bien, con el código anterior estamos mostrando una imagen. ¿Podemos incluir un mapa interactivo de Google en nuestra página web? La respuesta es que sí, como veremos a continuación.

 

 

USO DE GOOGLE MAPS PARA MOSTRAR UN MAPA INTERACTIVO

Google permite el uso de su api de mapas para mostrar mapas en páginas web. Existen multitud de posibilidades: crear mapas temáticos, cromáticos, personalizados, rutas, etc. y podemos mostrar una zona del mundo, un país, ciudad o calles. También podemos crear efectos y dibujar sobre los mapas. Nosotros en este curso no vamos a estudiar el api de Google Maps en profundidad, simplemente mostraremos un ejemplo para ejemplificar que es muy sencillo y tiene grandes posibilidades el uso de maps en nuestros sitios web.

Escribe este código en en editor de textos y guárdalo con un nombre de archivo como ejemplo2.html:

<!DOCTYPE html>

<html>

  <head> <title>Simple Map</title>

    <meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title>

    <style> *{font-family:sans-serif;}

                h1 {margin: 150px 0 30px 0; text-align:center; }

                #lienzoMapa {width:800px; height:600px; margin: 0 auto; border: 5px solid; }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <script>

var map;

function initialize() {

  var mapOptions = {

    zoom: 4,

    center: new google.maps.LatLng(9.814103, -83.118708)

  };

  map = new google.maps.Map(document.getElementById('lienzoMapa'), mapOptions);

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

  <h1>Utiliza el mapa</h1>

    <div id="lienzoMapa" ></div>

  </body>

</html>

 

 

El resultado esperado es que se muestre un mapa en el cual podemos desplazarnos, hacer zoom, e incluso llegar a la vista de “street view” o visión fotográfica de una localización.

Para saber las coordenadas de un lugar, podemos acceder a la web de google maps, situarnos sobre el sitio deseado, pulsar botón derecho y elegir ¿Qué hay aquí?. Se nos mostrará la dirección y coordenadas del lugar.

api google maps javascript

 

 

Hay que tener en cuenta que hemos indicado la posibilidad de obtener coordenadas del usuario o de obtener coordenadas buscándolas en Google Maps. ¿Hay más formas de obtener coordenadas? Sí. Además de JavaScript, existen otras vías para hacer geolocalización. Por ejemplo usando la IP del usuario, que puede determinarse usando lenguajes del lado del servidor como PHP, o usando servicios web de geolocalización.

 

 

PARA QUIEN QUIERA INVESTIGAR

Para quien quiera investigar y profundizar en las posibilidades del api de Google Maps puede visitar la documentación del api: https://developers.google.com/maps/documentation/javascript/

 

 

EJERCICIO

Crea una página web donde se muestre información sobre tu ciudad conteniendo un mapa interactivo de Google Maps, de acuerdo con esta estructura para el documento HTML.

Visita aquiElNombreDeTuCiudad

Aquí un texto descriptivo sobre la ciudad

Aquí una imagen de tu ciudad

Aquí otra imagen de tu ciudad

Aquí más texto descriptivo sobre la ciudad

Aquí un mapa interactivo de Google Maps dimensiones 800x600 pixeles de tu ciudad

Aquí un pie de página

 

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación