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が表示されません(どハマリした)。
結果