¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
Black Friday: -15 € a partir de 50 € en todos los libros online, eformaciones... con el código BLACK15. Pulse aquí
  1. Libros
  2. Aprender a desarrollar con JavaScript
  3. Geolocalización
Extrait - Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
Extractos del libro
Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
1 opinión
Volver a la página de compra del libro

Geolocalización

Principio de la geolocalización

El API HTML5 de geolocalización ofrece la posibilidad al usuario de la aplicación de conocer su posición geográfica (latitud y longitud).

Para realizar esta localización espacial, no es necesario recurrir a ninguna librería adicional porque esta funcionalidad es nativa y, por tanto, está integrada en los navegadores recientes, incluidos los smartphones (iPhone, Android...).

Entre las principales aplicaciones que utilizan los mecanismos de geolocalización, encontramos Google Maps, Google Street e incluso Google Earth. En realidad, se trata de un API que puede utilizar en sus propios desarrollos.

Los ejemplos que se presentan en la segunda parte de este capítulo usan justamente los API de Google.

Por tanto, al final de este capítulo sabrá utilizar un mapa de Google Maps con gran precisión (centrado, zoom y anotación, pasando por los diferentes modos de visualización...) y podrá desarrollar aplicaciones basadas en la geolocalización (localización de puntos de interés en un mapa, trayectos, distancias, cálculo de velocidad, geomarketing, aplicaciones de comunidad basadas en la geolocalización, uso de overlays, como, por ejemplo, las indicaciones meteorológicas...).

Para terminar, hay que observar que el uso de determinados API de Google no es gratuito y se establece una nueva tarificación desde...

Ejemplos de aplicaciones de geolocalización

1. Ejemplo 1: Visualización del mapa del centro de España

En este primer ejemplo vamos a implementar las funcionalidades básicas del API de geolocalización que se incluyen de manera nativa en HTML 5 y que, en consecuencia, son soportadas por los navegadores recientes (incluidos los smartphones).

El objetivo es muy simple: mostrar en pantalla un mapa de Google Maps que presente la región correspondiente al centro de España, con un centrado del mapa en la ciudad de Madrid.

Como se trata de nuestro primer ejemplo de cartografía, el script HTML/JavaScript se reproduce de forma íntegra (no se hará sistemáticamente en el resto de los ejemplos):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">  
 
<!--   
NOMBRE DEL SCRIPT: GEO_01.htm 
REALIZACIÓN INFORMÁTICA: Christian VIGOUROUX 
FECHA DE CREACIÓN: 15/10/2018 
FECHA DE ÚLTIMA MODIFICACIÓN: 15/10/2018 
OBJETIVO: Gestión Google Map - Mapa del centro de España 
(centrado en Madrid) --> 
 
<!-- Inicio script HTML --> 
<html> 
     
   <!-- Inicio encabezado script HTML --> 
   <head> 
         
      <!-- Etiqueta meta http-equiv & content --> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        
      <!-- Etiqueta meta que define la zona visualizable --> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/> 
      <!-- NB: El meta tag viewport indica al navegador el comportamiento 
      que debe adoptar para mostrar una página --> 
      <!--      initial-scale=1.0: Apertura de la página 
      con una escala del 100 % --> 
      <!--      user-scalable=yes: Funcionalidad 
      de zoom posible para el usuario --> 
      
 ...