LoginSignup
33
17

More than 3 years have passed since last update.

Angular Material に追加された google-maps を使ってみた

Last updated at Posted at 2019-12-07

私は現在、グーグルマップを利用した Angular アプリケーションを開発しています。

Angular 経験の浅い自分でも簡単に利用できる GoogleMap ライブラリーを調査していたところ、先日、Angular Material UI component library のパッケージとして、@angular/google-maps components/src/google-maps at master · angular/components · GitHub がリリースされたので、早速検証がてら触ってみました。

この記事では、@angular/google-maps の簡単な使い方を紹介していきます。

インストールとセットアップ

npm からインストールします。

$ npm i @angular/google-maps

インストールが完了したら、GoogleMapsModule を import します.

app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { GoogleMapsModule } from "@angular/google-maps";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, GoogleMapsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Maps JavaScript API のセットアップ

Maps JavaScript API を利用するために、index.html に下記 script タグを追加します。API Key の取得方法については、こちら を参照してください。

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GoogleMapExample</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
  type="text/javascript"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

以上でセットアップは完了です。

利用できるコンポーネント

GoogleMapsModule は、現時点では下記の3つのコンポーネントをexport しています。

これらを組み合わせることで、簡単に Angular アプリケーションにグーグルマップを統合することができます。

地図を表示する

早速アプリケーションに地図を表示してみます。
GoogleMap コンポーネントには、下記の @Input プロパティが定義されています。

  • zoom : 地図のズームレベル
  • center : 地図の中心座標
  • width : 地図の横幅
  • height : 地図の高さ
  • options : その他のオプションgoogle.Maps.MapOptions インターフェースで定義されているオプションを指定できる。

このプロパティを使って、東新宿駅を中心に地図を表示してみます。

map.component.ts
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  zoom = 16;
  // 東新宿駅の座標
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  // 地図のオプション
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };

  constructor() {}

  ngOnInit() {}
}

テンプレートでは、<google-map> を設置するだけです。

map.component.html
<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
></google-map>

アプリケーションを起動すると、設定通り東新宿駅周辺の地図が表示されました :smile:
スクリーンショット 2019-12-07 18.42.57.png

マーカーを表示する

地図にマーカーを表示するには、MapMarker コンポーネントを利用します。
試しに、現在位置を取得して、カスタム画像に変更したマーカーとして表示してみます。

MapMarker の options プロパティには、google.maps.MarkerOptions インターフェイスで定義されている値をセットできます。

map.component.ts
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  zoom = 16;
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };

  // 現在位置マーカーの座標
  currentPosition: google.maps.LatLngLiteral;
  // 現在位置マーカーのオプション
  currentPositionMarkerOption: google.maps.MarkerOptions = {
    icon: {
      url: "assets/point.png",
      scaledSize: new google.maps.Size(32, 32)
    }
  };

  constructor() {}

  ngOnInit() {
    // 現在位置を取得する。
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.currentPosition = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
}

テンプレートには、<map-marker> を設置します。

map.component.html
<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
>
  <map-marker
    *ngIf="currentPosition"
    [position]="currentPosition"
    [options]="currentPositionMarkerOption"
  >
  </map-marker>
</google-map>

いい感じに現在位置を表示できました :smile:
スクリーンショット 2019-12-07 18.24.37.png

地図を親コンポーネントから操作する

親コンポーネントから GoogleMap コンポーネントのAPIにアクセスするには、@ViewChild デコレーターを使います。

下記は、現在位置のマーカーがクリックされたら、マーカーの座標にパン(なめらかにカメラを移動)させるサンプルです。

map.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import { GoogleMap, MapMarker } from "@angular/google-maps";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.scss"]
})
export class MapComponent implements OnInit {
  // GoogleMap コンポーネントへの参照を得る.
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  zoom = 16;
  center: google.maps.LatLngLiteral = {
    lat: 35.697695,
    lng: 139.707354
  };
  options: google.maps.MapOptions = {
    disableDefaultUI: true
  };
  currentPosition: google.maps.LatLngLiteral;
  currentPositionMarkerOption: google.maps.MarkerOptions = {
    icon: {
      url: "assets/point.png",
      scaledSize: new google.maps.Size(32, 32)
    }
  };

  constructor() {}

  ngOnInit() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.currentPosition = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }

  // 現在位置マーカーがクリックされた時のハンドラー
  onCurrentPositionMarkerClick(marker: MapMarker) {
    // 地図をマーカーの座標までパンさせる。
    this.map.panTo(marker.getPosition());
  }
}

テンプレート

map.component.html
<google-map
  height="500px"
  width="500px"
  [center]="center"
  [zoom]="zoom"
  [options]="options"
>
  <map-marker
    #markerElem
    *ngIf="currentPosition"
    [position]="currentPosition"
    [options]="currentPositionMarkerOption"
    (mapClick)="onCurrentPositionMarkerClick(markerElem)"
  >
  </map-marker>
</google-map>

スクリーンショット

ezgif-2-59ca5efc08b5.gif

まとめ

@angular/google-maps を使うと、Angular アプリケーションから、GoogleMap の表示、操作をとても簡単に実行できることがわかりました。

Angular 経験が浅い自分でも非常に簡単にやりたいことを実現できたので、
これから GoogleMap を使った Angular アプリケーションを作成する場合は、一度利用を検討してみることをおすすめします。

また、より複雑なマップアプリケーションを作りたい場合は、AngularGoogleMaps(AGM) Angular 2+ Google Maps Components というこちらも素晴らしく良くできたサードパテーィのライブラリもあるので、要件に合わせて選択してみると良いと思います :smile:

33
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
17