Google Maps API v3 - Introducción

Mario Pérez Esteso -

Hello world!

Mi intención con estos tutoriales es mostraros cómo incluir un mapa de Google Maps dentro de vuestra aplicación web y cómo trabajar con él, mostrando algunas de las posibilidades que ofrece. En esta primera parte vamos a ver lo básico para poder insertar el mapa.

Partamos de un código HTML básico como es:

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Lo primero que necesitamos para poder incrustar un mapa de Google Maps dinámico en una web es conseguir nuestra API Key. ¿Cómo se consigue? Pues muy sencillo, nos tenemos que dirigir a este link: https://code.google.com/apis/console y ahí nos dirigimos a "APIS & AUTH" > "Credentials". Dentro de este apartado aparecerá un apartado llamado "API KEY" y el código que aparece es el que deberemos utilizar más adelante.

El siguiente paso es incluir la API dentro de nuestro código fuente, para ello insertamos el siguiente script:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> </head> <body> </body> </html>

El parámetro sensor de la url indica si la aplicación utiliza herramientas de geolocalización. Obligatoriamente hay que establecerlo a un valor. En el parámetro key deberemos copiar la key que hemos conseguido en el paso anterior.

El siguiente paso es crear el elemento en el que se incluirá el mapa:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> </head> <body> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

La anchura y la altura hay que especificarlas explícitamente, pudiendo adaptarlas según el tamaño de la pantalla del navegador. En este ejemplo se ha diseñado para que ocupe el 100% de su elemento contenedor.

Ahora debemos tener en cuenta una cosa, tal y como reza la documentación de la API:

"Todos los tamaños basados en porcentajes deben heredarse de los elementos de bloque principales, y si cualquiera de estos antecesores no puede especificar un tamaño, se supondrá un tamaño de 0 x 0 píxeles".

Es por ello que debemos declarar el siguiente bloque:

<!DOCTYPE html> <html> <head> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> </head> <body> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

Lo que debemos hacer es ir indicando el tamaño a todos los elementos contenedores del mapa en cascada, hasta llegar al <body> .

Ahora nos toca inicializar el mapa utilizando la API escrita en JavaScript. Para ello, debemos definir primero cuáles serán las opciones y características de nuestro mapa a través de la declaración de un objeto mapOptions:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> <script type="text/javascript"> var mapOptions = { center: new google.maps.LatLng(37.774807, -3.795573), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; } </script> </head> <body> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

Aquí le estamos indicando varias cosas:

  • 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.
  • 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.

El siguiente paso es crear el objeto del mapa en sí:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> <script type="text/javascript"> var mapOptions = { center: new google.maps.LatLng(37.774807, -3.795573), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapa_div"), mapOptions); </script> </head> <body> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

La creación del mapa es muy sencilla, sólo necesitamos crear un objeto Map pasándole al constructor como parámetros el elemento HTML en el que se va a insertar y las opciones que hayamos definido previamente.

Por último, lo que deberemos hacer es hacer una llamada a una función que inicialice el mapa una vez se haya cargado la página por completo, para ello hacemos la llamada a esta función a través del evento onload del <body> :

<body onload="inicializar_mapa()">

Para acabar, os dejo el código completo:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #mapa_div { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AQUI_TU_KEY&sensor=TRUE_OR_FALSE"> </script> <script type="text/javascript"> function inicializar_mapa() { var mapOptions = { center: new google.maps.LatLng(37.774807, -3.795573), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapa_div"), mapOptions); } </script> </head> <body onload="inicializar_mapa()"> <div id="mapa_div" style="width:100%; height:100%"></div> </body> </html>

Lo único que deberiamos hacer para echarlo a andar es insertar nuestra API Key y establecer el parámetro sensor a verdadero o falso.

En los siguientes tutoriales iremos hablando de algunas de las posibilidades que nos ofrece esta API (comentarlas todas sería un trabajo demasiado tedioso) como añadir placemarks, gestión de eventos, lectura de ficheros KML, etc.

Saludos!