Controlar un Google Maps Static Map usando botones y Javascript

 in Web Example by

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.

https://maps.googleapis.com/maps/api/staticmap?center=19.4,-99.2&zoom=10&size=640×640&key=AIzaSyB4LwQ8GAlWwxprhz-iALmrV5r1cEyQIcQ

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>
&nbsp;&nbsp;&nbsp;
<button id="lngplus">Lng +0.1</button>
<button id="lngmin">Lng -0.1</button>
&nbsp;&nbsp;&nbsp;
<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

Leave a comment