static maps | Reviblog

Hola a todos, para comenzar con este mini tutorial sobre el uso de google maps vamos a empezar por lo más básico, como mostrar un mapa estático a modo de imagen para mostrar por ejemplo donde nos encontramos localizados.

Esta es la manera más fácil de mostrar nuestra localización aunque al ser estático está limitado a mostrar únicamente una localización sin que se pueda interactuar con el mapa.

Para ello simplemente tenemos que añadir a nuestro html un elemento imagen y en el atributo src poner la url a la api de google de la siguiente manera:

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mapa estático</title>
<meta charset="utf-8" />
</head>
<body>
 <h1>Ejemplo de mapa estático</h1>
 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=color:yellow|43.2686751,-2.9340005" />
</body>
</html>

En este ejemplo mostramos una imagen con un mapa estático que muestra la localización del museo Guggenheim de Bilbao.

Como podemos observar en el atributo src de la etiqueta img ponemos la url http://maps.googleapis.com/maps/api/staticmap y le pasamos los parametros que definen como debe de ser la imagen de mapa.

Con el parámetro maptype le indicamos el tipo de mapa que tiene que mostrar, hay cuatro tipos de mapas disponibles en la API de Google Maps:

roadmap: especifica una imagen de mapa de ruta estándar, la que normalmente se muestra en la página web de Google Maps. Este es el tipo de mapa predeterminado.
satellite: muestra imágenes de satélite de Google Earth
hybrid: muestra una mezcla de vistas normales y de satélite
terrain: muestra un mapa físico basado en información del terreno.

Con el parámetro center le indicamos las coordenadas latitud y longitud en las que deseamos que esté centrado el mapa.

Con el parámetro zoom le indicamos el grado de zoom (aumento) a aplicar sobre el mapa.

Con el parámetro size mostramos el tamaño (anchura x altura) de la imagen.

Con el parámetro markers definimos los marcadores. Podemos definir el color, la posición (latitud,logitud). Las diferentes opciones que acepta el parámetro markers deben ir separadas por el carácter pipe ‘|’. Ademas del color y de la posición se puede definir una letra a modo de etiqueta con la opción label, también se puede definir el icono con la opcion icon por ejemplo ejemplo:

<img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=cafe|43.2686751,-2.934000" />

Para terminar con el mapa estático solo queda decir que podemos utilizar tantos marcadores como queramos añadiendo varios parámetros markers por ejemplo:

 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon|color:yellow|43.2686751,-2.9340005&markers=color:blue|43.2686751,-2.9320005" />

Si ejecutamos en un navegador el ejemplo anterior se mostrará en el navegador una imagen como esta: