Google Maps con Ionic 2

En este tutorial vamos a ver cómo podemos usar Google Maps con Ionic 2.

¿quieres aprender Ionic 2? Toma nuestro curso!

Angular2-google-maps

Para poder utilizar Google Maps en Ionic vamos a usar un paquete externo que se llama angular2-google-maps creado por Sebastian Müller.

Lo primero que tenemos que hacer es actualizar la versión de TypeScript, ya que angular2-google-maps require una version 1.8 o superior de TS. Para actualizar TypeScript corremos el siguiente código en nuestra terminal:

Instalar angular2-google-maps

Para instalar el paquete tenemos que correr el siguiente comando en la carpeta donde tengamos nuestro proyecto de Ionic 2:

Obtener una clave (key) de google maps

Para poder utilizar los mapas debemos tener una clave (key) de google maps, es gratuita, y la podemos obtener en este enlace.

Luego de hacer click en GET A KEY debemos registrar nuestra aplicación para poder usar los mapas.

En el menú podemos seleccionar ‘Crear proyecto’ y darle un nombre, o seleccionar algún proyecto de la lista (si tenemos alguno)

En este tutorial vamos a crear un nuevo proyecto, hacemos click en ‘Continuar’

registrar aplicación\

Luego hacemos click sobre ‘clave de API’ para obtener la clave:

obtener credenciales

Le damos un nombre a la clave y hacemos click sobre Crear

Nota: Podemos añadir restricciones en la parte inferior para evitar uso no autorizado de la clave.

clave

Ahora ya tenemos nuestra clave.

Importar AgmCoreModule en nuestro NgModule

El siguiente paso es importar google-maps en el módulo raíz de nuestra aplicación:

Mostrar en nuestra plantilla (template)

En la plantilla en la cual queramos mostrar el mapa usamos el siguiente código:

Con este código vamos a mostrar un mapa y un pin en el mapa en las coordenadas definidas por las variables latitud y longitud que debemos definir en nuestro componente:

Añadir una altura en el archivo scss

Este paso es indispensable, tenemos que definir la altura del bloque donde queremos mostrar el mapa, si no será cero y no lo podremos ver:

Una vez hayamos completados todos los pasos podremos ver el mapa en nuestra aplicación (al correr ionic serve):

mapa

Opciones extras

Una vez tengamos el mapa en nuestra aplicación podemos controlar otras opciones como el zoom,

La lista completa de opciones la podemos encontrar en la página de la documentación del módulo.

¿Tienes alguna duda o comentario? Dinos en los comentarios si quieres aprender más y sobre qué tema te gustaría que hagamos un tutorial

9 marzo, 2017

1 respuestas en "Google Maps con Ionic 2"

  1. Excelente tutorial …. una pregunta para hacer una busqueda de un domicilio Google maps con ionic 2 ?

Deja un mensaje

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

Aprende Fácilmente© Todos los derechos reservados