Angular4からgoogle mapを操作する「AGM (angular-google-maps)」を使ってmapを表示。

Angular4を使ってgoogle mapを表示する

「google map上でクリックしたときにマーカをプロットし、その位置情報をAjaxで投げてDB上に保存する」ということがしたくなりました。

google map上での操作については「Maps JavaScript API」を使用すればできるのですが、 生jsで書くとマーカや情報ウィンドウの管理が煩雑になりそうです。

そこで、「AGM (angular-google-maps)」というmoduleを使うことにしました。

今回はmapを表示させるところまでやってみようと思います。

0. 準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new angular-google-maps
ng serve

1. angular-google-mapsのパッケージをinstall

npm install --save-dev @agm/core

moduleのgithubはこちら。 https://github.com/SebastianM/angular-google-maps

2. 必要なmoduleを読み込む

// app.module.ts
import {
  AgmCoreModule,
  GoogleMapsAPIWrapper
} from '@agm/core';

3. @NgModuleのimportに、読み込んだModuleを追加

// app.module.ts
@NgModule({
  // ...
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'googleから取得したapi key'
    }),
  ]
// ...
});

4. app.component.htmlに、mapを読み込むためのdirectiveを記述

<agm-map
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  >
</agm-map>

5. app.component.tsに、mapの初期設定（緯度/経度等）を記述

// app.component.ts
export class AppComponent {
  lat: number = 35.681167;
  lng: number = 139.767052;
  zoom: number = 16;
}

6. app.component.cssに、mapの高さを記述（忘れがち）

// app.component.css
agm-map {
  height: 600px;
}

これを書かないとmapが表示されません（どハマリした）。

結果