Angular2を使用してgoogle mapをどのように扱えば良いか調査したときのメモ。

Angular2でgoogle mapを扱う。

Angular2を使用してgoogle mapをどのように扱えば良いか調査したときのメモ。

環境 OSX 10.11.6,Angular2,angular-google-maps

ググると、割とangular-google-mapsがメジャーそうなのでコレを利用することにした。
また、0から理解するのは大変なので、ここのソースを参考にさせてもらった。

パッケージ名が'angular2-google-maps'から'@agm/core'に代わると書いてあったので、今後のことを考え新パッケージ名に変更し動作を確認することにした。
しかし、単純にインストールするパッケージを変えただけでは、実行時にエラーなった。(旧パッケージ名では問題なく動く)

ブラウザのコンソールには、以下の大量のエラーメッセージが出力されていた。(Web画面はLoading...から変わらない)

Unhandled Promise rejection: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'google-map'.
1. If 'google-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'google-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" with the given lat/lng from-->
(略)

よく配布元のCHANGELOGを読むと「BREAKING CHANGES(破壊的変更)」との記載があり、パッケージ名変更に合わせて以下のようなクラス名・タグセレクタ名の置き換えが必要だった。(一部抜粋)
ここにも記載があった。

Old class name / old selector	New class name / new selector
SebmGoogleMap / sebm-google-map	AgmMap / agm-map
SebmGoogleMapMarker / sebm-google-map-marker	AgmMarker / agm-marker

今回、参考にしようとしたサンプルは、以下の修正を行うことで新パッケージ名で動いた。

$ git diff
diff --git a/package.json b/package.json
index fb7c1dc..b674cf6 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
-    "angular2-google-maps": "^0.17.0",
+    "@agm/core": "^1.0.0-beta.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a169cda..a077ff8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
 </form>
 <div class="address-panel">{{ address }}</div>
 <div class="trafficButton" (click)="setTrafficLayer()">Set Traffic Layer</div>
-<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
-  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
+<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
   <map-content #map [trafficSwitch]="trafficSwitch"></map-content>
-</sebm-google-map>
\ No newline at end of file
+</agm-map>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 541819d..35ef734 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';

-import { AgmCoreModule } from 'angular2-google-maps/core';
+import { AgmCoreModule, AgmMap, AgmMarker } from '@agm/core';

 import { MapService } from '../services/map.service';
 import { MapContentComponent } from '../components/map/map-content.component';
diff --git a/src/components/map/map-content.component.ts b/src/components/map/map-content.component.ts
index 16e8038..bdbd47e 100644
--- a/src/components/map/map-content.component.ts
+++ b/src/components/map/map-content.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';

-import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
+import { GoogleMapsAPIWrapper } from '@agm/core';

 declare var google: any;

diff --git a/src/services/map.service.ts b/src/services/map.service.ts
index 3172b03..3bf00ef 100644
--- a/src/services/map.service.ts
+++ b/src/services/map.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';

-import { MapsAPILoader } from 'angular2-google-maps/core';
+import { MapsAPILoader } from '@agm/core';

 declare let google: any;

後は、使い方をマスタするだけなのだが。