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

# Angular2でgoogle mapを扱う。

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

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

ググると、割とangular-google-mapsがメジャーそうなのでコレを利用することにした。
また、0から理解するのは大変なので、[ここ](https://github.com/l08084/example-angular2-google-maps-geocoding)のソースを参考にさせてもらった。

パッケージ名が'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-->
(略)
```

よく[配布元](https://github.com/SebastianM/angular-google-maps)の[CHANGELOG](https://github.com/SebastianM/angular-google-maps/blob/master/CHANGELOG.md)を読むと「BREAKING CHANGES(破壊的変更)」との記載があり、パッケージ名変更に合わせて以下のようなクラス名・タグセレクタ名の置き換えが必要だった。(一部抜粋)
[ここ](https://stackoverflow.com/questions/43659628/angular-google-maps-doesnt-render/43659842)にも記載があった。

|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|

今回、参考にしようとした[サンプル](https://github.com/l08084/example-angular2-google-maps-geocoding)は、以下の修正を行うことで新パッケージ名で動いた。

```diff
$ 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;

```

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