Si hablamos de mapas en la web, sin duda la referencia más conocida es Google Maps. En su momento revolucionó la forma en que los mapas podían ser vistos en internet. Hoy en día mantiene su liderazgo en muchas cuestiones, como los servicios de geolocalización, datos de tráfico, cálculo de rutas…y además con cobertura global.
Google es la marca comercial más reconocida en el mundo. Esto contribuye, sin duda a la popularidad y extensión de Google Maps, pero es que además dispone de Maps JavaScript API que permiten visualizar, y publicar nuestros mapas en la web.
En este artículo veremos paso a paso cómo crear un mapa web con la API de Google Maps, analizamos sus ventajas e inconvenientes y lo comparamos con otras librerías de mapas open source.
Índice
Como crear un mapa web con la API JavaScript de Google Maps
Lo primero que tenemos que saber es que todas las aplicaciones de la API de Google Maps requieren de una clave. Por lo tanto tendremos que acudir a la página de Google y obtener una clave de API.
Una vez que tengamos la clave podemos empezar a construir nuestro mapa. Necesitamos utilizar y por tanto conocer, aunque sea mínimamente, los tres lenguajes básicos que se utilizan en una página web: HTML, CSS y JavaScript.
Empezaremos por el armazón html de la página al que le incorporaremos unos estilos CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Maps JavaScript API</title>
<style> #map { height: 100%; } html, body
{ height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id ="map">
</div>
<script>
</script>
</body>
</html>
Vemos que el código anterior no es más que una estructura HTML estándar a la que hemos añadido unos estilos css. Hay que destacar que hemos creado un elemento <div id=»mapa»> que será el espacio encargado de albergar nuestro mapa. Observamos que en los estilos asignamos a este div el 100% del espacio, para adaptarlo a los diferentes tipos de dispositivos.
A continuación, abordamos la parte JavaScript que es la que realmente se ocupa del mapa. El código es el siguiente:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.5293101, lng: -5.6773233},
zoom: 13
});
}
Primero se crea una variable map y a continuación se realiza una instancia a la clase Map. Esta clase Map es el elemento central de la API de Google Maps, y es la encargada de crear el mapa. Para realizar una nueva instancia a esta clase se utiliza el operador JavaScript: new. El contenedor del mapa será el div que habíamos creado anteriormente y se lo indicamos mediante document.getElementById(‘map’).
Todos los mapas necesitarán de dos opciones obligatorias para poder construir el mapa, se trata de center y zoom. En center se determinan las coordenadas geográficas del centro del mapa y en zoom el nivel inicial de zoom.
Carga de la librería JavaScript de la API de Google Maps
Para cargar la librería debemos incorporar a nuestro código el siguiente script:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ESCRIBE_AQUI_TU_API_KEY&callback=initMap"> </script>
La librería se incorpora mediante la URL que figura en el código. A continuación escribiremos la clave que habíamos obtenido antes y el parámetro callback será el encargado de llamar a la función initMap(). El atributo async permite que el resto de la página se muestre mientras se descarga Maps JavaScript API.
Añadiendo un marcador
Si ahora queremos añadir un marcador al mapa con algún lugar que queramos destacar solo tendremos que añadir el siguiente código, dentro de la función initMap().
var marker = new google.maps.Marker({
position: {lat: 43.542194, lng: -5.676875},
map: map,
title: 'Acuario de Gijón'
});
Como vemos es muy sencillo. Creamos una instancia a la clase google.maps.Marker y le indicamos la posición geográfica que debe tener. En las opciones podemos hacer que aparezca un texto al mover el cursor sobre el marcador con title. El resultado es el mapa que se muestra a continuación.
Para facilitar la comprensión de este ejemplo reunimos todo el código.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Maps JavaScript API</title>
<style> #map {
height: 100%; }
html, body {
height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<div id ="map"> </div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCKiIqCdZGrVxx06LSbe7uG3zXOq1Cz5k&callback=initMap" async defer>
</script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.5293, lng: -5.6773},
zoom: 13, });
var marker = new google.maps.Marker({
position: {lat: 43.542194, lng: -5.676875},
map: map,
title: 'Acuario de Gijón' }); }
</script>
</body>
</html>
Ventajas e inconvenientes de la API de Google Maps
Como hemos visto la API de Google es sencilla y dispone de muy buena documentación. Tiene una galería de ejemplos, guías para el aprendizaje y una descripción de la librería muy completa. Como dijimos al principio Google Maps ofrece una cantidad y calidad de servicios insuperables, pero: ¿todo son ventajas?
Aquí entramos en el terreno de la opinión y por tanto en aspectos subjetivos y en consecuencia discutibles. La principal desventaja de Google es su propia naturaleza. Se trata de una empresa comercial y por tanto sus productos están sometidos a sus normas y precios. No hay que olvidar que aunque la librería es gratuita, si superamos cierto número de visitas o necesitamos servicios adicionales hay que pagar por ellos. Estamos por tanto sujetos a sus condiciones de uso, y desde mi punto de vista el tener que registrarse y solicitar una clave no es un punto a su favor. Además estamos obligados a utilizar el mapa de Google (aunque se puede personalizar en cierta medida) lo que limita nuestras posibilidades.
Comparativa con las librerías Open Source
La alternativa que se nos plantea, es el empleo de librerías Open Source, siendo las más populares Leaflet y OpenLayers. Ambas son excelentes, con la ventaja de que son libres y por tanto no tienen restricciones de uso. Si hacemos la comparación con Leaflet, vemos que esta librería ofrece las mismas funciones y su documentación es tan buena y en muchos aspectos incluso mejor. Su aprendizaje es sencillo y rápido. Además dispone de una gran cantidad de desarrolladores que implementan plugins. Esto último nos permite incorporar muchas funciones fácilmente, lo que se traduce en que Leaflet necesita menos líneas de código que la librería de Google para hacer lo mismo.
Es cierto que Leaflet u OpenLayers no proporcionan un mapa base, y que por lo tanto necesitan acudir a otros servicios como los de OpenStreetMap o Mapbox, pero esto no tiene por qué suponer ningún problema en la mayoría de los proyectos. En consecuencia podemos afirmar, que salvo en determinadas circunstancias muy concretas, las librerías Open Source son la mejor solución para publicar nuestros mapas en la web.
Tutor del curso online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.
Hola.
Gracias por el informe, es lo que estaba buscando.
La duda es respecto del street view que tiene google maps.
¿Hay alguna otra librería que lo tenga tambien? Pues no he encontrado.
Si bien quisiera migrar lo que tengo en google maps a otra opcion el tema que no tengan street view es una desventaja grande que me reclaman los usuarios.
Gracias
Estimado Marcelo:
Gracias por tu comentario. Existen algunas alternativas pero desde luego ninguna tan completa como street view. Por ejemplo bing tiene una herramienta similar pero solo disponible para algunas regiones de norteamerica y Europa.
Saludos
Estimado Danilo, puedes utilizar un archivo en formato GeoJSON para almacenar las coordenadas de tus puntos. Ese archivo puedes cargarlo posteriormente en el mapa, como se indica en el siguiente enlace:
https://developers.google.com/maps/documentation/javascript/importing_data?hl=es-419
Saludos
Hola talvez me pueden ayudar para en lugar de que los valores de latitud y longitud ya esten cargados por defecto los pueda obtener de un label respectivamente