El tema de la localización cada vez más da de que hablar y Google es uno de los principales involucrados en el tema. Esto lo podemos verificar de manera muy sencilla, podemos ingresar a una página web de algún negocio conocido y en su sección de Contáctanos nos encontraremos con Google Maps embebido en la misma mostrándonos la localización física del negocio.
Esto es solo una pequeña muestra de lo que podemos hacer con el API de Javascript de Google Maps, existen otros usos más avanzados pero para ello primero debemos saber que necesitamos para poder utilizarlo y eso será el primer punto a tratar en este tutorial.
Para poder incluir el API en nuestros desarrollos y hacer uso de su funcionalidad para la generación de los mapas se requiere que obtengamos las credenciales de desarrollador para el API de Javascript de Google Maps, a pesar que puede sonar como algo complicado no lo es solo debemos realizar unos simples pasos para su obtención, veamos:
[color=#696969]1[/color]
Primero debemos ingresar a la página de la consola para desarrolladores de Google al ingresar lo primero que nos aparecerá será un mensaje para empezar a utilizar la consola de desarrolladores indicándonos las ventajas que tenemos al crear un proyecto de API, para ir al siguiente paso pulsamos el botón Crear Proyecto:
[color=#696969]2[/color]
Luego de crear nuestro proyecto debemos buscar de la lista el API que necesitamos, en este caso sería el Google Maps Javascript API v3 pulsamos en el enlace y nos llevará a una pantalla donde podremos activar el uso del API al hacer click en el botón desactivar:
![introduccion-api-google-maps2.jpg]()
[color=#696969]3[/color]
Marcamos la casilla de aceptar los términos y condiciones y pulsamos el botón Aceptar, ya tendremos nuestro API activado sin embargo nos faltaría obtener las credenciales del mismo.
[color=#696969]4[/color]
Para ello debemos dirigirnos a la opción en el menú lateral llamada Credenciales, ingresamos y pulsamos en la opción Crear clave nueva, un dialogo será desplegado indicándonos los tipos de claves que podemos generar, de las opciones escogemos Clave de servidor que es la que se adapta a nuestros requerimientos ya que permitirá el acceso a cualquier IP para la utilización del API, dejamos el campo vacío y pulsamos el botón Crear.
[color=#696969]5[/color]
Luego de esto se generará nuestra clave que debemos tenerla a la mano para incluirla en nuestros ejemplos, esta llave la podremos ver en la siguiente imagen descrita con el campo Clave de la API:
![introduccion-api-google-maps3.jpg]()
Ya cubiertos los requisitos para poder utilizar el API, veamos cuales son los parámetros qué debemos conocer y estar familiarizados cuando construimos nuestros mapas:
Ya habiendo visto los parámetros que necesitamos para la construcción de nuestros mapas y los pasos para obtener nuestras credenciales de desarrollador es momento que pasemos a la parte práctica de este tutorial y veamos cómo construir un mapa simple, veamos los pasos a seguir:
[color=#696969]1[/color]
Primero creamos un documento llamado mapa_simple.html y dentro del mismo debemos incluir nuestro API para poder hacer uso de sus clases y métodos, es importante que en este punto incluyamos la credencial para el uso del API, en el código siguiente podemos reemplazar ese valor como lo indicamos en letra mayúscula:
[color=#696969]2[/color]
Luego debemos fijar el mapa a la sección correspondiente, que sería el <head>, para ellos usamos las etiquetas <style>y les damos las medidas de 800 px de ancho por 500 px de alto, veamos como luce esto en nuestro código:
[color=#696969]3[/color]
Hecho esto debemos pasar al punto fuerte de nuestro código y es la creación de nuestro código, para ello abrimos una etiqueta <script> y dentro de esta vamos a crear una función donde lo primero será habilitar los temas para el mapa con visualRefresh, luego debemos utilizar el objeto de mapOptions para setear las opciones de nuestro mapa, veamos como luce nuestra función hasta los momentos:
Es importante destacar del código anterior las opciones que utilizamos en nuestro mapa, para el valor de center usamos las coordenadas de Madrid, para otra localización podemos buscar las coordenadas en Internet y cambiarlas en nuestros código, luego tenemos el zoom con un valor de 10 que sería un valor medio y por último definimos el tipo de base como mapa de carretera.
[color=#696969]4[/color]
Ahora solo nos queda inicializar nuestro mapa y agregarlo al div correspondiente que tiene el ID mapaDiv:
[color=#696969]5[/color]
Por último cerramos el resto de nuestras etiquetas y construimos nuestro documento HTML e incluimos un div con el ID que mencionamos anteriormente para que el mapa sea vaciado en el mismo:
[color=#696969]6[/color]
Ejecutamos nuestro código en nuestro navegador utilizando el servidor web que tengamos instalado como por ejemplo Apache, el resultado debe verse de la siguiente manera:
![introduccion-api-google-maps4.jpg]()
Como pudimos apreciar la construcción de un mapa utilizando el API de Javascript es bastante sencillo y personalizable, esto es solo una muestra de lo que podemos hacer, en el siguiente ejemplo veremos una variante de nuestro útil que de seguro nos será de bastante utilidad.
Ya pudimos construir un mapa simple con una posición en nuestro navegador fija, sin embargo si necesitamos que el mismo se despliegue a pantalla completa solo debemos realizar una pequeña modificación a nuestro código anterior y tendremos lo que necesitamos, veamos qué debemos hacer:
[color=#696969]1[/color]
Para no eliminar el código de nuestro mapa anterior, vamos a crear un nuevo documento llamado mapa_pantalla_completa.html y vamos a pegar el código completo de mapa_simple.html.
[color=#696969]2[/color]
Hecho esto debemos localizar la etiqueta <style> y realizar algunos cambios que nos permitirán desplegar nuestro mapa a pantalla completa, esto cambiando los valores del ancho y alto del elemento html, body y el div donde incluimos el mapa:
[color=#696969]3[/color]
Para finalizar solo debemos ejecutar mapa_pantalla_completa.html y en nuestro navegador debería verse de la siguiente manera:
![introduccion-api-google-maps5.jpg]()
Uno de los aspectos más importantes en la construcción de los mapas es la utilización de las bases. Estas bases nos muestran imágenes de satélite, carreteras e incluso terrenos que pueden ser usados para distintos tipos de situaciones.
Por ejemplo, la localización de nuestra tienda de libros favoritos puede ser mostrada con un mapa de base de carretera pero esta no puede ser mostrada con un mapa de base satelital, sin embargo este es útil para demostrar si una parcela fue dibujada correctamente.
Google Maps posee cuatro tipos diferentes de bases para mapas, estos son Carretera, Satélite, Hibrido y Terreno. En el siguiente ejemplo vamos a construir una funcionalidad la cual nos permitirá cambiar el tipo de base para nuestro mapa y así poder visualizar cada uno de ellas, veamos los pasos a seguir:
[color=#696969]1[/color]
Como en ejemplos anteriores creamos un nuevo archivo, esta vez lo llamamos bases_mapas.html y copiamos el código del archivo llamado mapa_simple.html.
[color=#696969]2[/color]
Luego debemos localizar la función iniciarMapa() y luego de que esta finalice vamos a crear una nueva función que se encargará de manejar los eventos de unos botones que nos permitirán cambiar la base para nuestro mapa, veamos como luce el código de lo que acabamos de explicar:
[color=#696969]3[/color]
Por último solo nos queda crear los botones en nuestro HTML, esto lo hacemos antes de nuestro div, sin olvidarnos de agregar el onclick hacia la función eventosBotones() y colocarles los ID que usamos en los eventos de nuestra función:
[color=#696969]4[/color]
Corremos el ejemplo en nuestro navegador y pulsamos el botón de Hibrido, lo cual debería verse de la siguiente forma:
![introduccion-api-google-maps6.jpg]()
Con esto damos por concluido este tutorial, en el cual pudimos aprender a utilizar el API de Javascript de Google Maps para la construcción de mapas simples, y aunque su implementación y utilización sean algo complejos posee una utilidad sin igual que vale la pena partirse un poco la cabeza para aprender a utilizar el mismo en su totalidad.
Esto es solo una pequeña muestra de lo que podemos hacer con el API de Javascript de Google Maps, existen otros usos más avanzados pero para ello primero debemos saber que necesitamos para poder utilizarlo y eso será el primer punto a tratar en este tutorial.
¿Qué necesitamos?
Para realizar los ejemplos que veremos en este tutorial necesitaremos un servidor web instalado en nuestra PC para alojar los archivos, puede ser Wamp para Windows o Lamp para Linux, adicionalmente un editor de texto plano como Sublime Text 2 y un navegador web de nuestra preferencia para visualizar el resultado de los ejemplos.
Obteniendo las credenciales para el API
Para poder incluir el API en nuestros desarrollos y hacer uso de su funcionalidad para la generación de los mapas se requiere que obtengamos las credenciales de desarrollador para el API de Javascript de Google Maps, a pesar que puede sonar como algo complicado no lo es solo debemos realizar unos simples pasos para su obtención, veamos:
[color=#696969]1[/color]
Primero debemos ingresar a la página de la consola para desarrolladores de Google al ingresar lo primero que nos aparecerá será un mensaje para empezar a utilizar la consola de desarrolladores indicándonos las ventajas que tenemos al crear un proyecto de API, para ir al siguiente paso pulsamos el botón Crear Proyecto:
[color=#696969]2[/color]
Luego de crear nuestro proyecto debemos buscar de la lista el API que necesitamos, en este caso sería el Google Maps Javascript API v3 pulsamos en el enlace y nos llevará a una pantalla donde podremos activar el uso del API al hacer click en el botón desactivar:
[color=#696969]3[/color]
Marcamos la casilla de aceptar los términos y condiciones y pulsamos el botón Aceptar, ya tendremos nuestro API activado sin embargo nos faltaría obtener las credenciales del mismo.
[color=#696969]4[/color]
Para ello debemos dirigirnos a la opción en el menú lateral llamada Credenciales, ingresamos y pulsamos en la opción Crear clave nueva, un dialogo será desplegado indicándonos los tipos de claves que podemos generar, de las opciones escogemos Clave de servidor que es la que se adapta a nuestros requerimientos ya que permitirá el acceso a cualquier IP para la utilización del API, dejamos el campo vacío y pulsamos el botón Crear.
[color=#696969]5[/color]
Luego de esto se generará nuestra clave que debemos tenerla a la mano para incluirla en nuestros ejemplos, esta llave la podremos ver en la siguiente imagen descrita con el campo Clave de la API:
Parámetros importantes para el mapa
Ya cubiertos los requisitos para poder utilizar el API, veamos cuales son los parámetros qué debemos conocer y estar familiarizados cuando construimos nuestros mapas:
center
Esto define el centro del mapa en latitudes y longitudes, es decir, la localización de nuestro mapa.
zoom
Este parámetro es un valor numérico que define el nivel en el cual el mapa es mostrado, Google Maps posee distintos niveles de zoom los cuales van desde 0 que indica una vista mundial hasta 21+ que indica una vista de calle.
mapTypeId
Este último parámetro define el tipo de base con la cual será mostrado el mapa. Más adelante en este tutorial veremos cómo trabajar con este parámetro.
Mapa simple
Ya habiendo visto los parámetros que necesitamos para la construcción de nuestros mapas y los pasos para obtener nuestras credenciales de desarrollador es momento que pasemos a la parte práctica de este tutorial y veamos cómo construir un mapa simple, veamos los pasos a seguir:
[color=#696969]1[/color]
Primero creamos un documento llamado mapa_simple.html y dentro del mismo debemos incluir nuestro API para poder hacer uso de sus clases y métodos, es importante que en este punto incluyamos la credencial para el uso del API, en el código siguiente podemos reemplazar ese valor como lo indicamos en letra mayúscula:
<html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=CREDENCIAL_AQUI&sensor=false"> </script>
[color=#696969]2[/color]
Luego debemos fijar el mapa a la sección correspondiente, que sería el <head>, para ellos usamos las etiquetas <style>y les damos las medidas de 800 px de ancho por 500 px de alto, veamos como luce esto en nuestro código:
<style type="text/css">
#mapaDiv { width: 800px; height: 500px; }
</style>
[color=#696969]3[/color]
Hecho esto debemos pasar al punto fuerte de nuestro código y es la creación de nuestro código, para ello abrimos una etiqueta <script> y dentro de esta vamos a crear una función donde lo primero será habilitar los temas para el mapa con visualRefresh, luego debemos utilizar el objeto de mapOptions para setear las opciones de nuestro mapa, veamos como luce nuestra función hasta los momentos:
<script type="text/javascript">
var map;
function iniciarMapa() {
google.maps.visualRefresh = true;
var mapOptions = {
center: new google.maps.LatLng(40.41678, -3.70379),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Es importante destacar del código anterior las opciones que utilizamos en nuestro mapa, para el valor de center usamos las coordenadas de Madrid, para otra localización podemos buscar las coordenadas en Internet y cambiarlas en nuestros código, luego tenemos el zoom con un valor de 10 que sería un valor medio y por último definimos el tipo de base como mapa de carretera.
[color=#696969]4[/color]
Ahora solo nos queda inicializar nuestro mapa y agregarlo al div correspondiente que tiene el ID mapaDiv:
var mapElement = document.getElementById('mapaDiv');
map = new google.maps.Map(mapElement, mapOptions);
}
google.maps.event.addDomListener(window, 'load',
iniciarMapa);
[color=#696969]5[/color]
Por último cerramos el resto de nuestras etiquetas y construimos nuestro documento HTML e incluimos un div con el ID que mencionamos anteriormente para que el mapa sea vaciado en el mismo:
</script> </head> <body> <b>Mapa Simple</b></br></br> <div id="mapaDiv"></div> </body> </html>
[color=#696969]6[/color]
Ejecutamos nuestro código en nuestro navegador utilizando el servidor web que tengamos instalado como por ejemplo Apache, el resultado debe verse de la siguiente manera:
Como pudimos apreciar la construcción de un mapa utilizando el API de Javascript es bastante sencillo y personalizable, esto es solo una muestra de lo que podemos hacer, en el siguiente ejemplo veremos una variante de nuestro útil que de seguro nos será de bastante utilidad.
Mapa simple a pantalla completa
Ya pudimos construir un mapa simple con una posición en nuestro navegador fija, sin embargo si necesitamos que el mismo se despliegue a pantalla completa solo debemos realizar una pequeña modificación a nuestro código anterior y tendremos lo que necesitamos, veamos qué debemos hacer:
[color=#696969]1[/color]
Para no eliminar el código de nuestro mapa anterior, vamos a crear un nuevo documento llamado mapa_pantalla_completa.html y vamos a pegar el código completo de mapa_simple.html.
[color=#696969]2[/color]
Hecho esto debemos localizar la etiqueta <style> y realizar algunos cambios que nos permitirán desplegar nuestro mapa a pantalla completa, esto cambiando los valores del ancho y alto del elemento html, body y el div donde incluimos el mapa:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; }
#mapaDiv { width: 100%; height: 100%; }
</style>
[color=#696969]3[/color]
Para finalizar solo debemos ejecutar mapa_pantalla_completa.html y en nuestro navegador debería verse de la siguiente manera:
Cambiando la base del mapa
Uno de los aspectos más importantes en la construcción de los mapas es la utilización de las bases. Estas bases nos muestran imágenes de satélite, carreteras e incluso terrenos que pueden ser usados para distintos tipos de situaciones.
Por ejemplo, la localización de nuestra tienda de libros favoritos puede ser mostrada con un mapa de base de carretera pero esta no puede ser mostrada con un mapa de base satelital, sin embargo este es útil para demostrar si una parcela fue dibujada correctamente.
Google Maps posee cuatro tipos diferentes de bases para mapas, estos son Carretera, Satélite, Hibrido y Terreno. En el siguiente ejemplo vamos a construir una funcionalidad la cual nos permitirá cambiar el tipo de base para nuestro mapa y así poder visualizar cada uno de ellas, veamos los pasos a seguir:
[color=#696969]1[/color]
Como en ejemplos anteriores creamos un nuevo archivo, esta vez lo llamamos bases_mapas.html y copiamos el código del archivo llamado mapa_simple.html.
[color=#696969]2[/color]
Luego debemos localizar la función iniciarMapa() y luego de que esta finalice vamos a crear una nueva función que se encargará de manejar los eventos de unos botones que nos permitirán cambiar la base para nuestro mapa, veamos como luce el código de lo que acabamos de explicar:
function eventosBotones() {
document.getElementById('btnCar'
).addEventListener('click', function(){
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
});
document.getElementById('btnSat'
).addEventListener('click', function(){
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
});
document.getElementById('btnHib'
).addEventListener('click', function(){
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
});
document.getElementById('btnTer'
).addEventListener('click', function(){
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
});
}
[color=#696969]3[/color]
Por último solo nos queda crear los botones en nuestro HTML, esto lo hacemos antes de nuestro div, sin olvidarnos de agregar el onclick hacia la función eventosBotones() y colocarles los ID que usamos en los eventos de nuestra función:
<input id="btnCar" type="button" value="Carretera" onclick="eventosBotones();"> <input id="btnSat" type="button" value="Satelite" onclick="eventosBotones();"> <input id="btnHib" type="button" value="Hibrido" onclick="eventosBotones();"> <input id="btnTer" type="button" value="Terreno" onclick="eventosBotones();">
[color=#696969]4[/color]
Corremos el ejemplo en nuestro navegador y pulsamos el botón de Hibrido, lo cual debería verse de la siguiente forma:
Con esto damos por concluido este tutorial, en el cual pudimos aprender a utilizar el API de Javascript de Google Maps para la construcción de mapas simples, y aunque su implementación y utilización sean algo complejos posee una utilidad sin igual que vale la pena partirse un poco la cabeza para aprender a utilizar el mismo en su totalidad.
