Ionic/Angular で GoogleMaps (AGM)

はじめに

Angular Google Maps というライブラリをつかって、Ionic で Google Maps を使ってみたので、まとめます。

AGM とは

Angular で簡単に Google Maps JS API が使えるライブラリです。

セットアップ

インストール

npm install --save-dev @agm/core

なお、Angular 5 では、beta.2 を使用しないと落ちます https://github.com/SebastianM/angular-google-maps/issues/1511

app.module.ts で AgmCoreModule.forRoot() を import

app.module.ts

@NgModule({
  // ...
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'Google Maps の api key'
    }),
  ]
// ...
});

(Ionic のみ) 使用する Page で AgmCoreModule を import

page.module.ts

@NgModule({
  // ...
  imports: [
    AgmCoreModule
  ]
// ...
});

使い方

基本的な使い方

<agm-map [longitude]="135" [latitude]="35" [zoom]="16"></agm-map>

高さを css で指定する(必須)。

agm-map {
  height: 200px;
}

マーカーを表示

<agm-map [longitude]="135" [latitude]="35" [zoom]="16">
  <agm-marker [longitude]="135" [latitude]="35" label="P"></agm-marker>
</agm-map>

円を表示

 <agm-map [latitude]="35" [longitude]="135" [zoom]="16">
    <agm-circle
      [latitude]="35" [longitude]="135" [radius]="20"
      srokeColor="white" [strokePosition]="0" [strokeOpacity]="1.0" [strokeWeight]="2"
      fillColor="white" [fillOpacity]="1.0" ></agm-circle>
  </agm-map>

strokeWeight は px ですが、radius は地図上での大きさなので、ズームすると相対的に線が細くなります(円は大きくなるが、線の太さは変わらない)。

strokeWeight を単独で指定すると落ちます。[strokePosition]="0" を追加すると直ります（原因はよくわかりませんでした）。https://github.com/SebastianM/angular-google-maps/issues/770　

線を表示

  <agm-map [latitude]="35" [longitude]="135" [zoom]="16">
    <agm-polyline [strokeWeight]="2">
      <agm-polyline-point [latitude]="34.999" [longitude]="134.999"></agm-polyline-point>
      <agm-polyline-point [latitude]="35" [longitude]="135"></agm-polyline-point>
      <agm-polyline-point [latitude]="34.999" [longitude]="135.001"></agm-polyline-point>
    </agm-polyline>
  </agm-map>

多角形を表示

<agm-map [latitude]="35" [longitude]="135" [zoom]="16">
  <agm-polygon
    fillColor="white" fillOpacity="1.0"
    [paths]="[{ lat: 34.999, lng: 135 }, { lat: 35, lng: 134.999 }, { lat: 35, lng: 135.001 }]"></agm-polygon>
  </agm-map>