Google Maps: Mostrar una imagen con un mapa estático

Desarrollo de aplicaciones móviles multiplataforma con Ionic desde cero: IONIC 3 de [Revilla Vaquero, Eduardo]
 

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:

<img  src=”http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&size=[Anchura]x[Altura]&markers=color:[color]|label:[letra]|[latitud,longitud]” />

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:

Captura de pantalla 2016-01-03 a las 21.20.07

Índice   –  Capitulo Siguiente –>

 

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),
 

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.