¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Google Maps - La base

Últimamente hay bastante gente que me envía un correo preguntándome sobre cosas de Google Maps. Parece que es un tema que interesa y, por ende, me parece interesante tratarlo en la web.

El artículo es el primero de varios que tengo en mente pero no me gusta dar por supuesto el conocimiento, por lo que empezaremos por los cimientos. En este primer artículo/capítulo, aprenderemos a crear un mapa sencillo y algunas de las opciones que tiene el mapa.

El API de Google Maps está actualmente en la versión 3 y el uso de versiones anteriores está completamente desaconsejado. Puede que hayáis oído que Google Maps tiene limitaciones de uso en el API y quizá os estéis planteando el hacer uso de ella por la limitación. Actualmente el límite es de 25.000 peticiones diarias, de manera gratuita.

Incluye una referencia al API

Esta versión del API de Google Maps no necesita de API para conectarnos y hacer peticiones. Lo único que tenemos que indicarle a la API es si el dispositivo desde el que estamos haciendo la petición tiene un sensor para geoposicionarnos o no, como pudiera ser un smartphone o un GPS. Por regla general no tiene mucha implicación el poner sensor=true si vamos a ver la web en un navegador de escritorio, pero es obligatorio ponerlo.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

Creando un mapa

Ahora que ya hemos incluido el API en nuestra página, ya estamos preparados para crear mapas e incluirlos en la web. No obstante, antes me gustaría hacer una parada en el camino para explicar dos cosas que me parecen importantes.

Objetos literales

El API de Google Maps hace uso de los objetos literales para pasar argumentos. Es una bonita forma de programar a mi parecer, y sin duda nos ayudará en nuestro estilo más adelante. Es fácil de usar, de mantener, entender y de expandir. Si te estás preguntando qué es un objeto literal, aquí puedes ver uno:

var opciones = { tipo_mapa : 'Mi maravilloso tipo de mapa', longitud : 'Muy grande' };  

Como ves, es una forma sencilla de crear un objeto de JavaScript, en JSON. Esto es muy útil a la hora de pasar argumentos a una función ya que imaginad este caso:

function crearUnMapaDeGoogleMaps (tipo, centro, controles, fondocolor, zoom){  
  // Aqui ocurriría la magia con tantos atributos... ¡Vaya fiesta! 
}

¿No te parecen demasiados argumentos? Con un objeto literal podemos simplificarlo a esto:

var opciones = {  
  tipo: 'Fantastico',
  centro: 'Aun no estoy centrado...',
  controles: false,
  fondocolor: '#FFF',
  zoom: '20'
}

function crearUnMapaDeGoogleMaps(opciones) {  
  // Aquí accedemos a ellos con opciones.tipo, opciones.centro, etc. 
}
Ten en cuenta que no es obligatorio crear una variable que contenga el objeto literal sino que el objeto se puede construir directamente en el argumento que pasamos a la función. En aras de la claridad, en este y otros tutoriales, usaremos una variable para almacenar los valores.

Obtener elementos del DOM

A la hora de crear el mapa, tenemos que decirle a Google Maps, dónde vamos a querer colocarlo. En la gran mayoría de sitios y en la documentación del API de Google Maps, nos aparece para utilizar el siguiente método:

document.getElementById('nombreDeLaDiv');  

Por mantener coherencia, usaremos este método. No obstante, esto no significa que no podamos hacer uso de jQuery para ello. Mi advertencia es que no se debe incluir jQuery para algo tan nimio como obtener un elemento del DOM. Si queréis hacer getElementById en jQuery, usad esto:

$('#nombreDeLaDiv')[0];

Inicializa el mapa

Ahora, manos a la obra. Para inicializar el mapa, tenemos que llamar al constructor de la clase mapa. Necesita dos argumentos. Mientras que el primero es una referencia al elemento del DOM donde vamos a insertar el mapa (normalmente suele ser <div id=”mapa”> o similar), el segundo es un objeto literal que contiene un conjunto de propiedades.

Antes de entrar en detalles sobre las opciones que podemos pasar, echemos un vistazo al código necesario para crear un mapa:

var sevilla = new google.maps.LatLng(37.38264, -5.996295);  
var opciones = {  
  zoom: 13,
  center: sevilla,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var div = document.getElementById('mapa');  
var map = new google.maps.Map(div, opciones);  
Es buena idea almacenar la variable map en algún punto de nuestra aplicación ya que trabajaremos con ella si vamos a manipular más veces el mapa.

Opciones

El parámetro de opciones, tal y como hemos mencionado, es un objeto literal que contiene las propiedades que queremos pasar al objeto mapa. Hay tres propiedades que son obligatorias para que el mapa se inicialice correctamente. Estas son:

El parámetro de opciones, tal y como hemos mencionado, es un objeto literal que contiene las propiedades que queremos pasar al objeto mapa. Hay tres propiedades que son obligatorias para que el mapa se inicialice correctamente. Estas son:

  • center
    Esta propiedad establece el centro del mapa y toma como valor unas coordenadas del tipo google.maps.LatLng.
  • zoom
    El número que establece el nivel de zoom inicial del mapa.
  • mapTypeId
    Esta propiedad establece qué tipo de mapa se debe usar inicialmente.
  • google.maps.mapTypeId.
    • HYBRYD : Este mapa muestra las calles superpuestas a las imágenes de satélite.
    • ROADMAP : Este mapa muestra un mapa de calles. Es el más habitual.
    • SATELLITE : Solo muestra imágenes de satélite. Nada de calles.
    • TERRAIN : Este mapa muestra algunas características físicas del terreno como la vegetación y el terreno.

Hay muchas otras opciones que puedes usar a la hora de inicializar el mapa, como qué controles mostrar o el máximo zoom que vamos a permitir al usuario. Puedes ver una lista completa en la documentación de las opciones del mapa de Google Maps.

Demo

Puedes ver una demo del mapa que hemos creado en este capítulo.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!