Menu

Google Maps Nativo con Ionic

mapsdemosionic2 - November 09, 2017 por Daniel Londoño Sanchez | Edita este Post.
ionic3.8.0ionic-native4.3.3ionic-app-scripts3.0.1cordova-cli7.1.0ionic-cli3.16.0cordova-plugin-googlemaps2.1.0

Hola a todos, en esta ocasión les traemos un pequeño ejemplo de cómo poder implementar Google Maps Nativo en tu proyecto de Ionic, es algo muy sencillo y de seguro que con estas bases podrás dar inicio a una gran idea.

Actualización (08/11/2017)


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

También funciona con la más reciente versión de cordova-plugin-googlemaps (v2.1.0) que tiene un increíble rendimiento y una excelente integración con ionic native 4.

Ver demo


Para integrar Google Maps en tu aplicación es necesario que te registres en la cuenta de Google para desarrolladores y generes el API KEY de la aplicación ya sea para android o ios, esta te permitirá trabajar con Google Maps. Aquí dejo el link para ingresar a generar la key Link

Una vez nos encontramos en la plataforma de google, es necesario que selecciones la tecnología con la cual se integrará Google Maps, para este ejemplo lo trabajaremos para la plataforma Android.

Al seleccionar la plataforma nos aparecerá una serie de textos los cuales nos explican sobre Google Maps (esto lo puedes leer para que te enteres de todo lo que google tiene para nosotros trabajar con mapas), en este paso vamos a dar click en la parte superior de la ventana sobre costado derecho en el botón “Obtener una clave”.

En la ventana que se nos abre, nos dirigimos a seleccionar la opción “Crear proyecto” y continuar.

Continuamos digitando el nombre de nuestra aplicación para con este reconocer la clave generada por Google Maps. Yo he nombrado la app con el nombre “MapasNativo” y este será el nombre de nuestra aplicación.

Apenas tengas lista la información, puedes pulsar el botón de “Crear” para que google te genere el id de tu producto.

Copia esta clave API ya que con esta realizaremos la integración con Google Maps.

El siguiente paso es crear nuestra aplicación Ionic, en este caso usare la plantilla blank que trae ionic.

ionic start demo111 blank --cordova

Una vez se crea el proyecto, nos dirigimos a la carpeta que ionic crea con su estructura para comenzar a integrar Google Maps en nuestra aplicación.

cd demo111

Luego instalamos las plataformas para las cuales queremos desarrollar:

ionic cordova plataform add android
ionic cordova plataform add ios

Para integrar Google Maps Nativo de ionic, necesitaremos hacer uso del plugin de Google Maps.

Google Maps:

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" --save
npm install @ionic-native/google-maps --save

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

...
import { GoogleMaps } from '@ionic-native/google-maps';
...

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

Ahora ya tenemos lo necesario para integrar mapas en nuestra aplicación, vamos a realizar la importación de las librerías referentes a los 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.

...

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

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

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

...

Las libreriía de GoogleMaps hace parte de Ionic Native:

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

loadMap(): Este método va a crear la instancia del mapa.

loadMap(){

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: 43.0741904, // default location
        lng: -89.3809802 // default location
      },
      zoom: 18,
      tilt: 30
    }
  };

  this.map = this.googleMaps.create('map_canvas', mapOptions);

  // Wait the MAP_READY before using any methods.
  this.map.one(GoogleMapsEvent.MAP_READY)
  .then(() => {
    // Now you can use all methods safely.
    this.getPosition();
  })
  .catch(error =>{
    console.log(error);
  });

}

obtenerPosicion(): 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 usa la misma instancia del mapa para recuperar la posición actual del dispositivo. Luego dibuja un marker.

getPosition(): void{
  this.map.getMyLocation()
  .then(response => {
    this.map.moveCamera({
      target: response.latLng
    });
    this.map.addMarker({
      title: 'My Position',
      icon: 'blue',
      animation: 'DROP',
      position: response.latLng
    });
  })
  .catch(error =>{
    console.log(error);
  });
}

Finalmente toda la clase HomePage queda así:

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

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

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

  map: GoogleMap;

  constructor(
    private navCtrl: NavController,
    private googleMaps: GoogleMaps
  ) {}

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904, // default location
          lng: -89.3809802 // default location
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map_canvas', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      // Now you can use all methods safely.
      this.getPosition();
    })
    .catch(error =>{
      console.log(error);
    });

  }

  getPosition(): void{
    this.map.getMyLocation()
    .then(response => {
      this.map.moveCamera({
        target: response.latLng
      });
      this.map.addMarker({
        title: 'My Position',
        icon: 'blue',
        animation: 'DROP',
        position: response.latLng
      });
    })
    .catch(error =>{
      console.log(error);
    });
  }

}

Ahora vamos a abrir el archivo home.html y vamos a incluir un div con un id=”map_canvas”.

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

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

Ahora vamos a nuestro archivo home.scss e incluiremos el siguiente código.

page-home {
  #map_canvas{
    display: block;
    height: 100%;
    width: 100%;
  }
}

Ya con esto debería de quedar todo listo. Ahora vamos a compilar nuestro proyecto y realizaremos una prueba.

ionic cordova run  android --prod

NOTA: Recuerda activar el acceso a mapas de la aplicación por la configuración del celular en aplicaciones.

Resultados de la aplicación:

Ver código

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.

¡Compártelo!