Menampilkan Maps di Ionic

Mari Belajar Coding    11/07/2019    ionic   

Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar lagi mengenai framework Ionic untuk membuat aplikasi baru dengan menampilkan peta atau maps didalamnya. Fitur ini memberikan informasi berupa titik koordinat lokasi berupa peta kepada pengguna. Dalam pembuatan aplikasi ini, kita akan memanfaatkan api maps dari google.

Sebelum memulai membuat aplikasi baru menggunakan framework Ionic, silahkan teman-teman buat api google maps melalui google cloud console. Aktifkan layanan api seperti di bawah ini.

Menampilkan Maps di Ionic

Setelah api google maps di buat, create app baru melalui CMD atau terminal. Disini saya create app baru dengan nama MyappMaps dan tipe ionic angular seperti dibawah ini. 

ionic start MyappMaps blank --type=ionic-angular --cordova

Selanjutnya buka project MyappMaps, install plugin cordova google maps dan native google maps. 

ionic cordova plugin add cordova-plugin-googlemaps

npm install --save @ionic-native/google-maps@4

Install plugin geolocation untuk mendapatkan current location device.

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"

npm install --save @ionic-native/geolocation@4

Tambahkan import module google maps dan geolocation di app.module.ts seperti dibawah ini. Lihat baris yang di beri highlight.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

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

Tambahkan preference google maps di dalam config.xml sebelum tag </widget>. Ganti your_api_key dengan api google maps teman-teman yang di dapat dari google cloud console.

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="YOUR_API_KEY" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="YOUR_API_KEY" />

Selanjutnya buka file home.ts, tambahkan import module google maps dan geolocation kemudian tambahkan module geolocation di dalam constuctor. Buat dua fungsi untuk menampilkan maps statik koordinat dan untuk menampilkan maps dengan lokasi device saat ini(current location).

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

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment,
  GoogleMapsMapTypeId
} from '@ionic-native/google-maps';
import { Geolocation } from '@ionic-native/geolocation';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor(public navCtrl: NavController,
    private geolocation: Geolocation
    ) {

  }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
            lat: -6.9903167,
            lng: 110.4224298
         },
         zoom: 17,
         tilt: 30
       }
       //change type Maps
      //, mapType:GoogleMapsMapTypeId.HYBRID
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
    let marker: Marker = this.map.addMarkerSync({
      title: 'Static Map',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: -6.9903167,
        lng: 110.4224298
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }


  loadLocationMap() {
    //wahtch position
    const subscription = this.geolocation.watchPosition()
    .filter((p) => p.coords !== undefined) //Filter Out Errors
    .subscribe(position => {
        console.log(position.coords.longitude + ' ' + position.coords.latitude);
    });

    //get current location
   this.geolocation.getCurrentPosition().then((resp) => {     
     console.log(resp); 
       let mapOptions: GoogleMapOptions = {
         camera: {
           target: {
             lat: resp.coords.latitude,
             lng: resp.coords.longitude
           },
           zoom: 17,
           tilt: 30
         }
       };
       this.map = GoogleMaps.create('map_canvas1', mapOptions);
       let marker: Marker = this.map.addMarkerSync({
         title: 'Current position',
         icon: 'green',
         animation: 'DROP',
         position: {
           lat: resp.coords.latitude,
           lng: resp.coords.longitude
         }
       });
       marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
         alert('clicked');
       });

    }).catch((error) => {
      console.log('Error getting location', error);
    });
 }

}

Terakhir buka file home.ts untuk membuat button Show Maps dan tempat menampilkan peta.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Mari Belajar Coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="loadMap()">Show Static Maps</button>
  <!--Menampilkan statik map-->
  <div #map_canvas id="map_canvas" style="width: 100%; min-height: 250px"></div> <br> 

  <button ion-button (click)="loadLocationMap()" color="secondary">Show Current Position Maps</button>
  <!--Menampilkan current location map-->
  <div #map_canvas id="map_canvas1" style="width: 100%;min-height: 250px"></div> <br>  
</ion-content>

Tutorial membuat aplikasi mobile untuk menampilkan peta atau maps dengan framework Ionic sampai disini. Sekian, semoga bermanfaat.

Baca juga: Memperbaiki google maps for development purposes only 


Related Search:
Menampilkan Peta Google Maps di Ionic
Integrate Google Maps with Ionic
Implementing Native Google Maps in an Ionic