Help us understand the problem. What is going on with this article?

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

私は現在、グーグルマップを利用した 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:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away