La interacción con mapas en aplicaciones móviles es muy común y en este artículo explicaremos cómo integrar Google Maps usando el SDk de JS con Ionic.

Actualización (30/10/2017)

Hemos actualizado este demo con el último release Ionic 3.8.

Ver demo

Hay dos maneras de implementar google maps en nuestras aplicaciones, una es manejando el SDK de JS y la otra manera es integrar el SDK nativo al proyecto, en este artículo veremos cómo hacerlo con el SDK de JS.

Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo105 blank --cordova

Ionic crea una carpeta con el nombre del proyecto, nuestro siguiente paso será ubicarnos dentro a la carpeta del proyecto desde nuestra terminal con:

cd demo105

El proyecto inicia con el template blank y por esto tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar será src:

Paso 2: Instalando Geolocation

Para conocer la ubicación del usuario vamos a instalar el plugin de Geolocalización:

ionic cordova plugin add cordova-plugin-geolocation --save
npm install @ionic-native/geolocation --save

Ahora debemos importar el servicio de Geolocation en el array de providers en el archivo src/app/app.module.ts, así:

...
import { Geolocation } from '@ionic-native/geolocation';
...

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Paso 3: Incluir el SDk

Ahora iremos al archivo index.html que se encuentra la carpeta src y luego de llamar a build/polyfills.js incluimos el SDK, ademas tienes que agregar el API KEY que te ofrece google para usar el SDK, lo puedes generar desde está URL.

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
        It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

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

</body>

Paso 4: Crear mapa.

Ahora ya tenemos lo necesario para integrar mapas en nuestra aplicación, vamos a realizar la importación de las librerías referente al plugin que instalamos. Para esto nos dirigimos a la carpeta del proyecto creado por ionic app/page y abrimos el archivo home.ts e importamos las librerías y por último vamos a declarar una variable global para google declare var google;.

...

import { Geolocation, Geoposition } from '@ionic-native/geolocation';

declare var google;

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

  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation
  ) {

...

Las librería Geolocation hace parte de Ionic Native

Para este ejemplo vamos a declarar dos métodos en nuestro archivo home.ts estos se llamarán:

getPosition(): Este método nos devolverá la posición actual del dispositivo en coordenadas de latitud y longitud. Para esto debe de estar activo el servicio de GPS del dispositivo. En este método usaremos la librería Geolocation ya que esta tiene una función que nos recupera la posición actual del dispositivo. Estas coordenadas son pasadas al método loadMap(coordenadas).

getPosition():any{
  this.geolocation.getCurrentPosition().then(response => {
    this.loadMap(response);
  })
  .catch(error =>{
    console.log(error);
  })
}

loadMap(postion: Geoposition): Este método recibe como parámetro las coordenadas expresadas en latitud y longitud (estas coordenadas son tomadas del método obtenerPosicion()) y posiciona el mapa en la posición actual del dispositivo.

loadMap(position: Geoposition){
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  console.log(latitude, longitude);
  
  // create a new map by passing HTMLElement
  let mapEle: HTMLElement = document.getElementById('map');

  // create LatLng object
  let myLatLng = {lat: latitude, lng: longitude};

  // create map
  this.map = new google.maps.Map(mapEle, {
    center: myLatLng,
    zoom: 12
  });

  google.maps.event.addListenerOnce(this.map, 'idle', () => {
    let marker = new google.maps.Marker({
      position: myLatLng,
      map: this.map,
      title: 'Hello World!'
    });
    mapEle.classList.add('show-map');
  });
}

Paso 5: Template y estilos.

Ahora en el archivo home.html vamos a declarar un div con id map para poder identificar el elemento sobre el cual vamos a mostrar el mapa.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 105
    </ion-title>
  </ion-navbar>
</ion-header>

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

Y finalmente podemos añadir estilos para hacer que el mapa se muestre al 100% de alto y ancho de la pantalla, estos estilos estaran en el archivo home.scss:

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

Finalmente toda la clase HomePage queda así:

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

import { Geolocation, Geoposition } from '@ionic-native/geolocation';

declare var google;

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

  map: any;

  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation
  ) {}

  ionViewDidLoad(){
    this.getPosition();
  }

  getPosition():any{
    this.geolocation.getCurrentPosition()
    .then(response => {
      this.loadMap(response);
    })
    .catch(error =>{
      console.log(error);
    })
  }

  loadMap(position: Geoposition){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    console.log(latitude, longitude);
    
    // create a new map by passing HTMLElement
    let mapEle: HTMLElement = document.getElementById('map');

    // create LatLng object
    let myLatLng = {lat: latitude, lng: longitude};

    // create map
    this.map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
      let marker = new google.maps.Marker({
        position: myLatLng,
        map: this.map,
        title: 'Hello World!'
      });
      mapEle.classList.add('show-map');
    });
  }
}

Ya con esto debería de quedar todo listo. Ahora podemos probar nuestro proyecto.

ionic serve

Resultado:

Ver código
Ver demo

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

Te ha gustado el Post? No te olvides dejarnos una Calificación en Facebook y darle Like al Facebook Page. Espero sea de utilidad y sigan programando :)

Por: Nicolas Molina

Menu

Google Maps JS + Ionic en 5 pasos

Actualización (30/10/2017)

Paso 1: Iniciando el proyecto

Paso 2: Instalando Geolocation

Paso 3: Incluir el SDk

Paso 4: Crear mapa.

Paso 5: Template y estilos.

Resultado:

Recuerda:

¡Compártelo!

Artículos relacionados:

Background Geolocation

Google Maps Nativo con Ionic

Trazando rutas con Google Maps JS + Ionic

Escucha nuestro Podcast