使用Angular2处理谷歌地图。

在调查如何使用Angular2处理Google地图时的笔记。

操作系统环境为OSX 10.11.6，使用的Angular版本为Angular2，并且使用了angular-google-maps库。

在我搜索后，发现angular-google-maps似乎非常受欢迎，因此我决定使用它。
此外，由于从零开始理解很困难，所以我参考了这里的源代码。

由于’angular2-google-maps’的包名更改为’@agm/core’，并且考虑到未来的情况，我决定更改为新的包名并进行确认操作。然而，仅仅改变了安装包，并没有解决运行时出现的错误。（旧的包名没有问题地运行）

浏览器控制台中输出了以下大量错误消息。(网页界面仍显示”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（重大改变）”的说明，根据包名的更改，需要进行以下类名和标签选择器名的替换（摘录部分）。
这里也有相关说明。

這次我試圖參考的樣本，透過以下修改可以在新的套件名稱下運作。

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

后面只需要掌握如何使用了。