Introducción al API de Google Maps

Esta es una ligera introducción a una serie de tutoriales acerca del API de Google Maps, ¿porque Google Maps? Google Maps es una de las API's más utilizadas en el mundo de la tecnología, tan solo hay que pensar cuantas personas no ubican un lugar o se transportan a el haciendo uso de Google Maps.

Para esta serie usaré la versión 3 del API hecha en JavaScript, ya que solo haré ejemplos en el entorno web ya que apenas aprenderé a usar Android.

Antes de empezar hay que organizar el lugar donde crearemos nuestro para ellos creen una carpeta donde guardaran el trabajo en ella creen un archivo html y 2 carpetas una llamada "css" y una llamada "js". Sugiero esta organización para mantener por separado el contenido html, los estilos y la funcionalidad.

Bueno una vez hecho esto procederemos a crear el archivo html, en este caso le llame "index.html".

En el código se puede observar que solo se definieron 3 cosas

La referencia a los estilos.
La referencia al API de Google Maps (Aquí pueden encontrar información acerca de los parámetros que podemos agregar al cargar la API de Google Maps).
La referencia a jQuery (Esta no es necesaria para usar Google Maps, pero este ejercicio servirá como base para hacer otras cosas así que lo agregue).
La referencia a un script que es el que contendrá el funcionamiento del mapa ("mapa.js").
Un elemento div que contendrá el mapa.

Ahora hay que darle un tamaño al elemento que contendrá al mapa ya que sino aunque cargue el API no seremos capaz de verlo. Para ello hay que agregar las siguientes lineas en el archivo css.

Ahora pasamos a la parte más divertida, JavaScript :D. Aquí pondremos toda la funcionalidad.

Con estas líneas ya se puede visualizar el mapa. Hay que destacar que la variable opciones cuenta con los atributos obligatorios para hacer que el mapa aparezca. Para ver que otros parámetros puede recibir el objeto mapa se puede consultar la documentación.

Ahora que ya tenemos mapa vamos a agregarle una pequeña funcionalidad que permita que se agregue un marcador cada vez que se de un click sobre el mapa.

Ahora agregaremos una función que abra una ventana cada vez que se da click al marcador.

Con esto ha terminado esta pequeña introducción al API de Google Maps, próximamente un tutorial para usar el API de rutas y uno sobre distintos usos de un mapa de calor, dudas o comentarios o peticiones para próximas entradas pueden dejar un mensaje :) También pueden entrar a mi canal en el que próximamente pondré la versión en vídeo.

Código