Ediciones ENI Editorial | líder en informática
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 -->
...