Menu

Google Maps Nativo con Ionic

mapsdemosionic2 - April 19, 2017 por Daniel Londoño Sanchez
ionic3.0.1ionic-native3.4.2cordova-cli6.5.0ionic-cli2.2.2

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 (19/04/2017)


Hemos actualizado este demo con el último release de Ionic 3, si aún estas en alguna de las versiones anteriores puedes seguir estos pasos de Ionic 2 a Ionic 3.

Ademas en este demo usamos la función de lazy loading y @IonicPage. Puedes ver el repositorio Demo111


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 --v2

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

Para integrar Google Maps Nativo de ionic, necesitaremos hacer uso de 2 plugins: Geolocalización y Google Maps.

Ya sabiendo cuales son los plugins a instalar, procedemos a agregarlos a nuestra aplicación.

Geolocalización:

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

Google Maps:

ionic 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 los servicios de Geolocation y GoogleMaps en el array de providers en el archivo src/app/app.module.ts, así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
...
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps } from '@ionic-native/google-maps';
...

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
...

import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 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,
    public googleMaps: GoogleMaps
  ) {

...

Las librerias Geolocation y GoogleMaps hacen parte de Ionic Native:

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

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 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).

obtenerPosicion():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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
loadMap(postion: Geoposition){
  let latitude = postion.coords.latitude;
  let longitud = postion.coords.longitude;
  console.log(latitude, longitud);
  
  // create a new map by passing HTMLElement
  let element: HTMLElement = document.getElementById('map');

  let map: GoogleMap = this.googleMaps.create(element);

  // create LatLng object
  let myPosition: LatLng = new LatLng(latitude,longitud);

  // create CameraPosition
  let position: CameraPosition = {
    target: myPosition,
    zoom: 18,
    tilt: 30
  };

  map.one(GoogleMapsEvent.MAP_READY).then(()=>{
    console.log('Map is ready!');

    // move the map's camera to position
    map.moveCamera(position);

    // create new marker
    let markerOptions: MarkerOptions = {
      position: myPosition,
      title: 'Here'
    };
    map.addMarker(markerOptions);
  });

}

Finalmente toda la clase HomePage queda así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 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,
    public googleMaps: GoogleMaps
  ) {}

  ionViewDidLoad(){
    this.obtenerPosicion();
  }

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

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

    let map: GoogleMap = this.googleMaps.create(element);

    // create LatLng object
    let myPosition: LatLng = new LatLng(latitude,longitud);

    // create CameraPosition
    let position: CameraPosition = {
      target: myPosition,
      zoom: 18,
      tilt: 30
    };

    map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log('Map is ready!');

      // move the map's camera to position
      map.moveCamera(position);

      // create new marker
      let markerOptions: MarkerOptions = {
        position: myPosition,
        title: 'Here'
      };
      map.addMarker(markerOptions);
    });

  }

}

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

1
2
3
4
5
6
7
8
9
10
11
<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 111
    </ion-title>
  </ion-navbar>
</ion-header>

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

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

1
2
3
4
5
6
7
page-home {
  #map{
    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 platform add android
ionic build 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 demo

Recuerda:

Si quieres ejecutar este demo un 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

Y luego

ionic state restore

esto es para descargar todas las dependencias del proyecto.


¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Daniel Londoño Sanchez

¡Compártelo!

Nunca te pierdas una Noticia.