Controlar un Google Maps Static Map usando botones y Javascript
El Static Map o Mapa Estático es una función de Google Maps que permite cargar una imagen de mapa, normalmente usando una URL que se introduce en el atributo src del elemento img de HTML.
La imagen de mapa no es interactiva como el control normal de Google Maps, es solo una imagen estática, de ahí el nombre de Mapa Estático.
Creando un Static Map
Basicamente se una URL de Google, aqui te dejo un ejemplo:
https://maps.googleapis.com/maps/api/staticmap?center=19.4,-99.2&zoom=10&size=640x640&key=APIKEY
La url tiene ciertos parámetros, entre ellos las coordenadas latitud, longitud, el zoom, la medida de la imagen (Máximo de 640×640) y el API KEY, en un articulo anterior ya explique como obtener el API KEY. En la consola de desarrolladores debemos activar los servicios de Google Maps.
Una vez con el API KEY podemos generar la URL y nos mostrara un mapa. Les dejo mi APIKEY de ejemplo, pero se puede saturar y dejar de servir en cualquier momento.
Script para controlar el mapa estático
Lo que vamos a hacer es crear un script para modificar los valores de la URL al pulsar unos botones.
Tendremos 6 botones:
- Lat +0.1: Sumar 0.1 a la latitud
- Lat -0.1: Restar 0.1 a la latitud
- Lng +0.1: Sumar 0.1 a la longitud
- Lng -0.1: Restar 0.1 a la longitud
- Zoom +1: Sumar 1 a el zoom
- Zoom -1: Restar 1 a el zoom
Al presionar cada botón vamos a modificar la URL y cada vez que se modifique la URL vamos a actualizar el valor SRC de elemento IMG, también mostraremos los datos Longitud, Latitud y Zoom en un párrafo.
A continuación el script completo con comentarios en el código. Solo tienes que copiar el código y guardarlo en un archivo con extensión .html, no es necesario ninguna librería adicional, pero necesitaras conexión a internet para obtener el mapa.
<!DOCTYPE html>
<html>
<head>
<title>Mapa Estatico - Google Maps - Evilnapsis</title>
</head>
<body>
<h1>Controlar un Google Maps Static Map usando botones y Javascript</h1>
<button id="latplus">Lat +0.1</button>
<button id="latmin">Lat -0.1</button>
<button id="lngplus">Lng +0.1</button>
<button id="lngmin">Lng -0.1</button>
<button id="zoomplus">Zoom +1</button>
<button id="zoommin">Zoom -1</button>
<br><br>
<img id="image"> <!-- Aqui va la imagen -->
<div id="data"></div> <!-- Aqui van los datos -->
<script type="text/javascript">
/// https://maps.googleapis.com/maps/api/staticmap?center=19.4,-99.2&zoom=10&size=640x640&key=AIzaSyB4LwQ8GAlWwxprhz-iALmrV5r1cEyQIcQ
var lat = 19.4; // Valor latitud inicial
var lng = -99.2; // Valor longitud inicial
var zoom = 10; // Valor zoom inicial
var apikey = "AIzaSyB4LwQ8GAlWwxprhz-iALmrV5r1cEyQIcQ"; //
function loadmap(){ // funcion que carga y recarga la url de la imagen y muestra metadatos
var markercenter = "&markers=color:red%7Clabel:X%7C"+lat+","+lng; // Crear un marcador para el centro del mapa
var url = "https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+lng+"&zoom="+zoom+"&size=640x640&key="+apikey+markercenter; // URL con todos los paramentros
document.getElementById("image").src = url; // Asignar la URL de mapa al elemento imagen
document.getElementById("data").innerHTML = " Lat: <b>"+lat+"</b> Lng: <b>"+lng+"</b> Zoom: <b>"+zoom+"</b>"; // Mostrar los metadatos
}
loadmap(); // Cargar el mapa por primera vez
document.getElementById("latplus").onclick = function(){ lat+=0.1; loadmap(); } // Sumar 0.1 a latitud y recargar la url del mapa
document.getElementById("latmin").onclick = function(){ lat-=0.1; loadmap(); } // Restar 0.1 a latitud y recargar la url del mapa
document.getElementById("lngplus").onclick = function(){ lng+=0.1; loadmap(); } // Sumar 0.1 a longitud y recargar la url del mapa
document.getElementById("lngmin").onclick = function(){ lng-=0.1; loadmap(); } // Restar 0.1 a latitud y ...
document.getElementById("zoomplus").onclick = function(){ zoom+=1; loadmap(); } // Sumar 1 a zoom y ...
document.getElementById("zoommin").onclick = function(){ zoom-=1; loadmap(); } // Restar 1 a zoom y recargar la url del mapa
</script>
<p>Powered by <a href="http://evilnapsis.com/">Evilnapsis</a></p>
</body>
</html>
Y este seria en resultado.
Y eso seria todo 😉
Documentación oficial: https://developers.google.com/maps/documentation/maps-static/intro