3D プリンター入門

ホーム > ネイティブ > Google Maps の利用方法

Google Maps の利用方法

Ionic から Google Maps を簡単に利用するためのプラグインが利用できます。

Android - Google Maps

ここでは Android をターゲットにして Google Maps を利用するためのプラグイン cordova-plugin-googlemaps の利用方法を説明します。

Google Maps API を利用するために、まずは API キーを取得する必要があります。

キーは Google Maps Android API のキー取得ページで取得できます。

キーの利用を特定のアプリケーションに制限する場合は、まず次の方法で SHA1 を取得します。

$ keytool -list -v -keystore ~/.android/debug.keystore -storepass android

このコマンドの結果から SHA1 を取得します。

次に Google の API マネージャで SHA1 とパッケージ名を入力します。

プラグインのインストール

キーを取得したら次の手順で、プラグインをインストールします。

$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="キーはここ"
$ npm install --save @ionic-native/google-maps

もし、バージョンに関する警告などが表示されたら package.json から @ionic-native/core のラインを消して、 再構成するとうまく行く場合があります。

$ npm install --save @ionic-native/core 

利用サンプル

緯度、経度、及び住所情報をパラメータとして受け取り、その場所の地図を表示するページを作成してみましょう。

次のコマンドでページを追加します。

$ ionic g page mapPage

ページモジュール src/pages/map-page/map-page.module.ts は次の通り。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MapPage } from './map-page';

@NgModule({
  declarations: [
    MapPage,
  ],
  imports: [
    IonicPageModule.forChild(MapPage),
  ],
  exports: [
    MapPage
  ]
})
export class MapPageModule {}

ページテンプレート src/pages/map-page/map-page.html は次の通り。

<ion-header>
  <ion-navbar>
    <ion-title>Map View</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <div id="map"></div>
</ion-content>

map という id を持つ div 要素を作っています。ここに地図が表示されます。

スタイルシート src/pages/map-page/map-page.scss は次の通り。

page-map-page {
  #map {
        width: 100%;
        height: 100%;
        border: 1px solid #999;
  }
}

height を設定しないと地図が見えないので注意してください。

コード src/pages/map-page/map-page.ts は次の通り。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
  GoogleMaps, GoogleMap, GoogleMapsEvent,
  LatLng, CameraPosition, MarkerOptions
} from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-map-page',
  templateUrl: 'map-page.html',
  providers: [ GoogleMaps ],
})
export class MapPage {

  lat: number;
  lng: number;
  addr: string;

  constructor(
    private googleMaps: GoogleMaps,
    public navCtrl: NavController,
    public navParams: NavParams) {
      this.lat = navParams.get("lat");
      this.lng = navParams.get("lng");
      this.addr = navParams.get("addr");
  }

  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {

    let element: HTMLElement = document.getElementById('map');
    let map: GoogleMap = this.googleMaps.create(element);

    map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {

        let latLng: LatLng = new LatLng(this.lat,this.lng);
        let cameraPosition: CameraPosition = {
          target: latLng,
          zoom: 15,
          tilt: 30
        };

        map.moveCamera(cameraPosition);

        let markerOptions: MarkerOptions = {
          position: latLng,
          title: this.addr
        };

        map.addMarker(markerOptions)
          .then((marker)=>{
            marker.showInfoWindow();
          })
          .catch((err)=>{
            console.log(err);
          });
      });
  }
}

さらにルートモジュール src/app/app.module.ts に上記のページモジュールを取り込みます。

...
import { MapPageModule } from '../pages/map-page/map-page.module';

@NgModule({
  ...
  imports: [
    HttpModule,
    BrowserModule,
    MapPageModule,
    IonicModule.forRoot(MyApp)
  ],
  ...

以上で地図を表示するページができました。

この MapPage を呼び出すのは次のようなコードで呼びます。

import { MapPage } from '../map-page/map-page';

  ...
  loc_lng: number;
  loc_lat: number;
  loc_addr: string;

  constructor(
    public navCtrl: NavController) {}
  ...

  onCardClick(){
      this.navCtrl.push(
        MapPage,
        {
          lat: this.loc_lat,
          lng: this.loc_lng,
          addr: this.loc_addr,
        });
    }
}

ここでは lat に緯度 (latitude)、lng に経度 (longitude)、addr に住所 (文字列) をセットして渡しています。

map-page.ts のコンストラクタで NavParams を使って、これらの値を受け取っています。

ホーム > ネイティブ > Google Maps の利用方法