Google maps nos permite Insertar mapas en un blog o página web usando la nueva API v3 de Google. Crear marcadores, globos o cuadros con información y mostrar imágenes y fotos en el mapa.

1. Introducción

Google Maps es un servicio “gratuito” de Google que ofrece imágenes de mapas desplazables, así como fotos por satélite del mundo entero e incluso la ruta entre diferentes ubicaciones. Es semejante a Google Earth; una aplicación para Windows, Mac y Linux; pero con la diferencia que Google Maps es fácilmente adaptable a cualquier sitio web. Google Maps posee una API abierta y documentada que podemos encontrar en el siguiente enlace: https://developers.google.com/maps.

Antes de que hubiera una API pública, algunos desarrolladores descubrieron la manera de hackear Google Maps para incorporar los mapas en sus propios sitios web. Esto llevó a Google a la conclusión de que había una necesidad de una API pública, y en junio de 2005 fue lanzado públicamente. [1] Actualmente el servicio es “gratuito” pero con ciertas restricciones, en caso uno quiera usarlo comercialmente o requiera realizar un elevado número de consultas.

Mediante este tutorial les mostrare cómo incluir un mapa de Google Maps dentro de una aplicación web y cómo personalizarlos para obtener mejores resultados. En esta primera parte veremos los requisitos y los recursos necesarios para poder mostrar y personalizar un mapa dentro de una pagina web.

1.1 Requisitos previos para el curso de Google maps API

Para este tutorial es importante conocer los conceptos básicos en los siguientes lenguajes:

– JavaScript
– Programación orientada a objetos
– HTML
– CSS

Así mismo es importante contar con la clave Key para API de Google Maps que nos permitirá visualizar y realizar las pruebas de funcionamiento de nuestro mapa en tiempo real.

1.2 Funcionamiento de Google maps

El funcionamiento de Google Maps está basado en la interacción de HTML, CSS y JavaScript. Los mapas son imágenes que se cargan en el fondo a través de peticiones ejecutadas por la tecnología de AJAX, y se insertan en un <div> en la página HTML. Mientras navegas en el mapa, el API envía información acerca de las nuevas coordenadas y los niveles de “zoom” del mapa a través de AJAX y esto retorna las imágenes.

El API permite el manejo de archivos de JavaScript que contienen las clases, métodos y propiedades que se usan para el comportamiento de los mapas. Este tutorial está elaborado según la documentación de la versión 3.

1.3 Conversión de mapas físicos a decimales para google maps

Las coordenadas están expresadas usando números decimales separados por coma. La latitud siempre precede la longitud. La latitud es positiva a la derecha del punto de origen (0,0) mostrado en el mapa y negativo si va antes. La longitud es positiva si va arriba del punto de origen y negativa si va debajo.

En los mapas físicos, las coordenadas están expresadas en grados, así que la posición de Lima sería:

12°2’43” SUR, 77°1’52” OESTE

La forma de convertir estos datos a decimales sería:

(12°2’43” SUR ) = -(12 + (2 / 60) + (43 / 3600)) = -12.0453
(77°1’52” OESTE) = -(77 + (1 / 60) + (52 / 3600)) = -77.0311

La longitud se multiplica por negativo, porque está a la izquierda (oeste) del punto 0,0. La latitud de multiplica por negativo (sur), porque está debajo del puno 0,0. Para esta guía solo vamos a estar trabajando con decimales.

1.3.1 Máximo de decimales

Google maps no se limita a cierta cantidad de decimales. Sin embargo, según unas pruebas hechas, se notó que números mayores a 6 decimales es una pérdida de tiempo. Así también google estableció en varios métodos que la mayor cantidad a trabajar es 6 decimales, como por ejemplo el método toUrlValue(). Es decir, cuando vayamos a establecer los decimales se puede hacer así:

– 5 a 6 decimales: es el máximo que debemos usar para ser específicos
– 4 decimales: para algún detalle en el mapa
– 3 decimales: es bueno para centrar ciudades
– 2 decimales: es apropiado para centrar países

2. Creando nuestro primer mapa

2.1 Estructura General

Para crear nuestro primer mapa con la APIv3 de Google Maps necesitaremos crear un documento HTML. Este documento puede estar en XHTML o HTML5 (también en versiones anteriores) y debe tener una estructura mínima, similar a la que reproducimos a continuación:

2.2 Etiqueta Head

El segundo de los elementos es la etiqueta <head>. Esta sección de la página contiene una serie de elementos muy importantes. En primer lugar encontramos la etiqueta <meta charset> que dice qué tipo de codificación de caracteres estamos utilizando. En este caso utilizaremos UTF-8, ya que incluye caracteres especiales para todos los idiomas. A continuación podemos observar la etiqueta <title>, que establece el título de la página web. Ambos son elementos obligatorios que debemos incluir en nuestro código para poder validar el documento.

2.2 Etiqueta Body

La etiqueta <body> contiene los diferentes elementos que serán visibles en nuestra página web. En nuestro caso, de momento sólo tenemos un elemento <div> con el atributo id y el valor “map”. Por sí sólo, este elemento no mostrará nada, pero una vez creemos la hoja de estilo e incorporemos algo de JavaScript, el valor “map” nos ayudará a identificar y conectar los tres documentos (HTML, CSS y JavaScript).

2.3 La hoja de estilos

Para fijar el tamaño del mapa debemos establecer el estilo del elemento <div> que contendrá el mapa. El tamaño de este contenedor define el tamaño del mapa. Una buena práctica consiste en mantener separados el código HTML y el CSS, por lo tanto, crearemos otro archivo con extensión .css llamado “estilo.css”. Además, para mantener una estructura ordenada, crearemos una carpeta con el nombre css en la que guardaremos las diferentes hojas de estilo que vayamos creando.

Esta de sobre entendido que, si estas en este tutorial posees conocimientos mínimos en hoja de estilos, pero de todas maneras vamos a explicar brevemente los procedimientos y sintaxis para mayor comprensión. Trabajaremos con un mapa que ocupe todo el ancho de la página (width: 100%) y 500 píxels de alto (height: 500px). Además, agregaremos un borde de 1 píxel de color negro (border: 1px solid #000) a nuestro contenedor. El archivo “estilo.css” quedaría de la siguiente manera:

2.4 Enlazando componentes del contenedor de mapas

Una vez creado el fichero CSS con los estilos, es necesario hacer una referencia en el archivo HTML apuntando al archivo CSS. Esta referencia se hace con el elemento <link> dentro de la sección <head>. Aprovecharemos también, para definir el idioma de nuestra página con la etiqueta <html lang=”es”>:

2.5 Enlazando referencia de mapa

La API de Google Maps se encuentra alojada en los servidores de Google. Para poder cargar la API de Google Maps debemos hacer una referencia desde nuestro archivo HTML hacia el lugar en el que se encuentra ésta. La referencia se ha de incluir en la sección <head> del documento. La cargaremos con el elemento <script>. Este elemento tiene dos atributos que debemos utilizar. El primero es el tipo de script que deseamos utilizar y el otro es la URL que apunta a la API.

2.6 Sensor

La API de Google Maps requiere que se indique si la aplicación que estamos creando utiliza algún tipo de sensor, por ejemplo para determinar la ubicación del usuario a través de un localizador de GPS. Esto es especialmente útil en las aplicaciones pensadas para dispositivos móviles. En nuestro caso no utilizaremos ningún tipo de sensor por lo que el valor utilizado será “false”. En caso contrario utilizaríamos el valor “true”

2.7 Localización (idioma)

La API de Google Maps intentará determinar automáticamente qué idioma utiliza la interfaz de usuario. No obstante, también podemos indicarlo en el <script> que hemos utilizado para referenciar la API de Google Maps. Para hacerlo, debemos añadir el parámetro (opcional) &language=”codigo_del_idioma” al final de la cadena:

2.8 Localización (región)

Al cargar la API de Google Maps desde maps.googleapis.com se aplica un sesgo por defecto hacia los Estados Unidos. Si deseamos modificar este comportamiento predeterminado, lo podemos hacer mediante la adición de un nuevo parámetro a la etiqueta <script>: “region”. Los valores válidos para este parámetro son los de la ISO 3166-1 alpha-2 code. El valor para España es “ES”.

3. Crear nuestro primer mapa

Hasta el momento ya tenemos nuestro fichero HTML vinculado a la API de Google Maps y a la hoja de estilos, ya podemos empezar a escribir código JavaScript para inicializar nuestro mapa. De la misma manera que con las hojas de estilo, también es una buena práctica separar el código JavaScript de nuestro HTML. Así que crearemos un fichero llamado “map.js” y lo guardaremos en una carpeta con nombre “js”.
Una vez creada esa estructura, debemos referenciar el fichero “map.js” desde nuestra página HTML. Para ello, utilizaremos de nuevo la etiqueta <script>, pero esta vez referenciando un fichero ubicado en nuestro PC o servidor:

La posición de esta nueva etiqueta no es trivial. Debe estar ubicada a continuación de la referencia a la API de Google Maps, y no antes. De esta manera nos aseguramos de que la API de Google Maps sea cargada antes de que la página HTML intente usarla.

4. Opciones especificas del contenedor de Mapas

4.1 Inicializar mapa

Llegados a este punto, inicializaremos un mapa dentro del <div> que anteriormente habíamos creado en nuestra página HTML. Para ello, haremos una referencia desde nuestro fichero “map.js”, utilizando el método “document.getElementById()”. Este método busca el ID de un elemento HTML y devuelve una referencia al mismo elemento. Es importante tener en cuenta que un mismo ID sólo puede ser utilizado una vez por página. En el caso de que no se pueda encontrar el ID indicado, el valor devuelto será “null” o lo que es lo mismo, nada.
Crearemos una variable llamada mapDiv usando el método getElementById() referenciando nuestro <div id=”map”>:

4.2 Opciones de mapa

El objeto “mapOptions” es necesario y define las propiedades de visualización del mapa. Por lo tanto, crearemos una variable llamada “options” con las tres propiedades mínimas necesarias para que el mapa funcione:

center: El punto central de nuestro mapa, es decir, lo primero que veremos cuando se cargue. Debemos crear un objeto LatLng para especificar las coordenadas del punto.
zoom: La distancia de la cámara a la superficie del mapa. Números comprendidos entre 1 y 23.
mapTypeId: Tipo de mapa que se debe cargar. Dentro de esta categoría tenemos varias opciones:
Roadmap: Carga el típico mapa con las calles.
Satellite: Muestra el mapa con imágenes tomadas desde satélite (se vería como el Google Earth).
Terrain: Muestra características del físicas como elevación del terreno y vegetación.
Hybrid: Carga las calles principales sobre imágenes de satélite.

A estas características le podemos añadir más, como por ejemplo si queremos que se muestren los controles o no, dónde queremos que éstos aparezcan, zoom máximo y mínimo que podremos hacer en el mapa, etc. Todas las características disponibles las podemos encontrar en la API Reference.
Antes de proporcionar los valores a nuestra variable “options”, prepararemos los valores de la propiedad “center” mediante el objeto google.maps.LatLng:

En esta variable hemos grabado las coordenadas de Cataluña, mediante las cuales centraremos posteriormente nuestro mapa en esa posición.

A continuación ya podemos añadir las tres opciones comentadas anteriormente:

Como se puede observar en el código anterior, hemos utilizado el valor de la variable “lima” para establecer el centro de nuestro mapa, hemos establecido un nivel de 8 a nuestro zoom, y finalmente, hemos escogido el tipo de mapa ROADMAP como mapa que debe cargarse por defecto.
La propiedad “center” también la podemos definir utilizando directamente el objeto “google.maps.LatLng”:

Ahora que ya hemos hecho referencia al elemento <div> mediante el “mapDiv” y hemos establecido las diferentes opciones, sólo nos falta pasarlas al objeto “Map”:

var mapa = new google.maps.Map(mapDiv, options);

Ahora que lo tenemos todo, sólo nos queda poner en marcha el código cuando la página cargue. Para ello, abriremos y cerraremos el código de la siguiente manera:

window.onload = function() {
// Aquí el código que deseamos cargar
}

El resultado final es:

5. Anexo

Los resultados finales de los nuestros documentos serian de la siguiente manera:

Estilo.css (css/estilo.css)

Map.js (js/map.js)

Index.htm (index.htm)

 

6. Fuente

– http://www.uteq.edu.mx/tesis/ITIC/0145.pdf [1]
– http://www.rubenalcaraz.es/pinakes/informatica/introduccion-google-maps-api-v3/#codesyntax_14
– https://geekytheory.com/google-maps-api-v3-introduccion/
– https://dviejo.gitbooks.io/programacion-web-integracion-con-apis/content/sesion_5_google_maps.html
– https://norfipc.com/codigos/codigos-para-crear-mostrar-mapas-google-maps.php
– https://hpneo.github.io/gmaps/examples.html
– http://www.maestrosdelweb.com/google-maps-api-v3-introduccion-y-primeros-pasos/

Print Friendly