Ionic - Native Google Map Example

[IONIC Example] 

Google Map (Native)

IONIC에서 GoogleMaps Native API를 이용하여 지도를 붙여보고자 한다.

IONIC 설치 등은 앞 글(설치 및 새로운 앱 시작)을 참조하길 바라며...

IONIC Blank 앱을 시작한다.

> ionic start GoogleMapExampleApp blank

특별한 메뉴나 기능이 필요한 것이 아닌, 첫 화면인 HOME에 구글 지도를 표시할 것이므로 blank로 앱을 생성한다. 

앱 이름인 GoogleMapExampleApp 안으로 들어간후 앱을 실행한다.

> cd GoogleMapExampleApp
> ionic serve

바로 GoogleMap을 붙여 보도록 한다.

사용할 수 있는 GoogleMap은 iframe으로 동작하는 Web용 버전과 Native로 개발된 두가지 버전을 사용할 수 있으며, 이 글은 Native 버전을 설명한다.

우선 현재 구성된 IONIC 앱에 GoogleMap Native Plugin을 설치해야 하며, 사전에 Google API 키가 필요하다. Google Dev. Console에서 프로젝트를 등록하고 키(Key)를 생성한다.

키를 생성한 후 해당 키로 사용할 수 있는 라이브러리를 추가 해야한다. 

GoogleMap Android API를 사용할 수 있도록 설정한다.

위 그림의 "사용 설정" 버튼을 클릭하면 얼마 후 API가 사용설정 상태로 변경되며, 버튼이 "관리"로 변경된다.

이제 IONIC용 GoogleMap Plugin을 추가하고, 라이브러리를 설치 한다.

> ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="<생성된키>" --variable API_KEY_FOR_IOS="<생성된키>"

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

설치시 API_KEY_FOR_ANDROID, API_KEY_FOR_IOS 두 값으로 위 과정에서 생성된 키를 넣는다.

GoogleMap을 IONIC에 Provide 한다.

./src/app/app.module.ts를 아래와 같이 두줄을 추가하여 변경한다.

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 { GoogleMaps } from '@ionic-native/google-maps';

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

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

이후 HOME 화면 관련된 파일들을 편집하여 Google Native Map이 열리도록 아래와 같이 코드를 변경한다.

./src/pages/home/home.html 열어 아래와 같이 지도가 그려질 위치에 DIV를 하나 만든다.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Example - Google Maps
    </ion-title>
  </ion-navbar>
</ion-header>

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

DIV의 ID는 "map"으로 하여 GoogleMaps Native가 해당 ID위치에 지도를 그릴 수 있도록 준비한다.

./src/pages/home/home.scss 열어 지도의 height 100%를 코딩한다.

page-home {

    #map {
        height: 100%;
    }

}

./src/pages/home/home.ts 열어 Map을 그리는 코드를 작성한다.

import { Component } from '@angular/core';
import { NavController, Platform, NavParams } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';

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

  map: GoogleMap;

  constructor(public navCtrl: NavController,
    private platform: Platform,
    public navParams: NavParams) {

    this.platform.ready().then(() => {
      this.loadMap();
    });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GoogleMapNativePage');
  }

  loadMap() {
    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'myLocation': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'target': {
          lat: 37.5666103,
          lng: 126.9783882
        },
        'tilt': 0,
        'zoom': 16,
        //'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      //alert('is ready');
    });
  }

}

주요 부분은 Highlight 하였다. 

우선 IONIC 에서 제공하는 Android, iOS등의 platform이 준비된 시점을 알수 있도록 platform ready 이벤트를 사용하여 지도를 그릴 시점을 판단하며, loadMap()에서 new GoogleMap() 하여 지도를 그린다.

지도의 Target은 위경도로 서울시청을 설정하였으며, zoom 16으로 인근 지역이 어느정도 확대되어 보이도록 한다.

마지막으로 지도를 모두 그린 후 ready 이벤트를 받는다.

애석하게도 Google Map Native는 당연히 Android 단말기에서 실행해야 결과를 확인 할 수 있다. 모든 코딩이 끝났으니 IONIC에 Android 플랫폼을 추가하고, 빌드하고, 배포하여 실행하도록 한다.

우선 Android 플랫폼 추가

> ionic cordova platform add android

IONIC 설치시 함께 설치한 cordova를 드디어 사용한다. IONIC은 cordova를 이용할 뿐이다.

잠시 후 오류 없이 플랫폼 추가가 끝났다면 빌드하여 debug 버전의 apk를 받을 수 있다.

> ionic cordova build android

빌드 과정을 꼼꼼히 살펴볼 필요가 있으며 빌드가 성공하면 "BUILD SUCCESSFUL in 00s" 라는 메시지와 함께 설치 가능한 apk의 위치를 알려준다. 

/platforms/android/app/build/outputs/apk/debug/app-debug.apk

이파일을 가지고 있는 Android 기기에 설치한 후 실행한다. 

설치와 실행은 알아서~~ 

./src/pages/home/home.ts 의 일부아다. MAP_READY 이벤트 발생시 지도에 "서울시청" Marker를 추가한다.

import { Component } from '@angular/core';
import { NavController, Platform, NavParams } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';

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

  ...

  loadMap() {

    ...

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      //alert('is ready');
      this.map.addMarker({
        position: {
          lat: 37.5666103,
          lng: 126.9783882
        },
        title: "서울시청"
      })
    });
  }

}

이 글의 소스코드는 아래에서

https://github.com/lugam/ionic-googlemaps-exam