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

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.

2 comentarios en “Google Maps: Mostrar una imagen con un mapa estático

  1. Hola Eduardo, soy Guillermo Rodríguez (Argentina), he comprado tu libro de Ionic 3, me parece excelente, sobre todo en la parte de manejo de providers, súper claro!, pero por algunos problemas importantes de salud, recién ahora puedo entrar de lleno al desarrollo de una app híbrida.

    Estoy desarrollando una app @ionic/cli-utils : 1.19.2, ionic (Ionic CLI) : 3.20.0, con login (php y mysql) y side menú que funciona de maravilla, excepto claro, una página en particular. Y es aquí donde quiero pedirte ayuda, ya que hace más de 20 días que no logro hacerla funcionar.

    La página se carga perfectamente, e intento mostrar un map de google en ella. (tengo las dos api key para iOS y Android).

    El error que me indica en el browse (Windows) (ionic serve), es:

    ERROR TypeError: Cannot read property ‘constructor’ of undefined.

    El plugin (2.6.2) lo instalé con: ionic cordova plugin add cordova-plugin-googlemaps y
    npm install –save @ionic-native/google-maps

    A partir del 2.6.0. van las claves en el config.xml y no en el add plugin. es correcto, verdad ?

    en config.xml:

    y

    A partir de esto, he entrado en infinidad de foros, y la única respuesta que conseguí es que haga lo siguiente:

    “Normalmente es el problema de la falta de coincidencia de la versión del plugin, por eso aparece ese error: puedes probar esta versión ya que esta todavía tiene soporte para ionic 3”

    npm install @ ionic-native / google-maps @ 4.21.0

    Hice esto, y ahora el error que aparece es:
    Typescript Error Cannot find name ‘unknown’.
    C:/ionic3/usademo/node_modules/@ionic-native/core/decorators/common.d.ts
    export declare function wrapPromise(pluginObj: any, methodName: string, args: any[], opts?: CordovaOptions): Promise;
    /**
    * Checks if plugin/cordova is available

    Lo único que hice es el npm install @ ionic-native / google-maps @ 4.21.0
    , me faltó hacer algo más ¿?

    Bueno, aquí termino, te pido ayuda para saber qué hacer y cómo hacerlo, el mapa es esencial para la app, muchas gracias, y espero por tu libro de Ionic 4/5 así comienzo de a poco a “migrarme”.

    1. Hola Guillermo,

      No puedo reproducir el problema que me comentas, hace tiempo que no trabajo con la versión 3 de ionic, y para ser sincero ahora mismo estoy desbordado de trabajo y no tengo tiempo para hacer pruebas de este tipo, a ver si algún lector le ha pasado algo parecido y te puede dar una solución.

      En cualquier caso, por lo que comentas veo que no has instalado el plugin de cordova, ese podría ser el problema.
      A demás de instalar el paquete npm: npm install @ ionic-native / google-maps@ 4.21.0, tambien deberías instalar el plugin de cordova: ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps.

      Si encuentras la solución agradecería que comentaras para ayudar a otras personas que puedan tener el mismo problema.

      Gracias por comentar 🙂

      Un saludo.

Deja una respuesta

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.