Google Maps con Ionic 2 paso a paso – Parte 1 visualizando el mapa

Son muchas las aplicaciones que se integran con los mapas ofrecidos por Google (Google Maps). Hoy vamos a crear un proyecto sencillo de Google Maps con Ionic 2 que conecte con la API de Google y nos permita visualizar los mapas.

Como tenemos costumbre de hacer, vamos a ver una imagen de lo que vamos a desarrollar en este proyecto de google maps con ionic 2.

Creando la estructura básica de un proyecto en Ionic.

Manos al código ya que no hay mejor forma de explicar los ejemplos. Empezamos como siempre creando nuestro proyecto Ionic desde la línea de comandos y seguidamente accedemos al directorio del proyecto.

ionic start blog-googlemaps blank --v2
cd blog-googlemaps

Como iniciamos nuestro proyecto con el template blank tendremos una estructura básica.

Instalando lo necesario para integrar Google Maps con Ionic 2.

Continuamos en la línea de comandos y ahora lo que vamos a hacer es instalar librerías necesarias para poder trabajar con Google Maps y typescript.

npm install --save @types/googlemaps

Añadiendo el SDK de Google Maps.

Desde nuestro IDE de desarrollo vamos a acceder a /blog-googlemaps/src/index.html e insertaremos la llamada al SDK incluyendo la API de Google Maps justo después de build/polyfills.js quedando así:

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- Esta es la llamada al SDK de Google Maps-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>

Recordemos que es necesario reemplazar YOUR_API_KEY por el API_KEY de nuestra aplicación. Si no tienes claro como generar una API_KEY, te facilito esta información que nos ofrece nuestro gran amigo Google: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=es

Si a pesar de las indicaciones sigues teniendo algún problema o duda, realiza un comentario y lo atenderé lo antes posible.

Creando  la lógica para visualizar el mapa.

Llega el momento de modificar o mejor dicho crear la lógica de la aplicación para poder mostrar en la vista los mapas de Google. Abrimos el script src/pages/home/home.ts y dejamos el código tal y como muestro a continuación. Podéis ver que está muy comentado para facilitar su entendimiento.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

/* Declaramos la variable de Google que reutilizaremos más tarde */
declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  /* Declaramos la variable mapa */
  mapa: any;

  constructor(public navCtrl: NavController) {}

  /* Esperamos a que haya cargado la aplicación para cargar el mapa */
  ionViewDidLoad(){

    /* Asignamos en la capa mapa de la vista home.html los valores */
    let mapData = document.getElementById('mapa');
    /* Indicamos unas coordenadas y zoom para mostrar por defecto */
    this.mapa = new google.maps.Map(mapData, {
      center: {lat: 39.4755174, lng: -0.3654215},
      zoom: 12
    });

    google.maps.event.addListenerOnce(this.mapa, 'idle', () => {
      mapData.classList.add('show-map');
      google.maps.event.trigger(mapData, 'resize');
    });
  }
}

Creando la vista y estilo para mostrar correctamente Google Maps con Ionic 2.

Ahora en el script src/pages/home/home.html vamos a declarar un div con id mapa quedando así.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      luisjordan.net
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="mapa"></div>
</ion-content>

Ahora en el script src/pages/home/home.scss vamos a darle estilo a la aplicación.

page-home {
  ion-content{
    background: rgb(229, 227, 223);
    #mapa {
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 150ms ease-in;
      &.show-map{
        opacity: 1;
      }
    }
  }
}

Llegados aquí ya podemos ejecutar desde consola la sentencia ionic serve -l para poder apreciar el resultado de nuestro ejemplo. ¿Sencillo verdad?

Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

[wysija_form id=»1″]

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Iniciación.
Tiempo de realización: 10 minutos.
Ionic Framework version: 2.2.3
Node versión: 7.5.0
NPM versión: 4.3.0
Cordova versión: 6.5.0
Sistema operativo: Windows 8