AngularでGoogleマップをAngularGoogleマップと統合する方法

序章

Googleマップは、さまざまな構成設定をサポートするGoogleが提供する地図サービスです。 Googleマップをアプリケーションに追加すると、住所や座標のセットよりも多くのコンテキスト情報をユーザーに提供できます。

Angular Google Maps は、AngularアプリケーションにGoogleMapsAPIを利用するためのツールを提供するコンポーネントです。

このチュートリアルでは、@agm/coreライブラリを使用して、マーカー付きのマップを作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。
• Google MapsJavasScriptAPIキー。 これにはGoogleアカウントが必要です。 GoogleCloudPlatformコンソールにログインします。 新しいプロジェクトを作成します。 プロジェクトでGoogleMapsJavasScriptAPIを有効にします。 そして、APIキーのクレデンシャルを作成します。

注： Google Maps APIを使用するときに「開発目的のみ」のメッセージを回避するには、有効なクレジットカードを提供し、Google Cloud Projectの請求先アカウントに関連付ける必要がありますが、そうではありません。このチュートリアルに必要です。

このチュートリアルは、ノードv14.13.1、npm v6.14.8、angular v10.1.5、および@agm/corev1.1.0で検証されました。

ステップ1—プロジェクトの設定

@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。

ターミナルウィンドウで、次のコマンドを使用します。

npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests

これにより、スタイルが「CSS」（「Sass」、「Less」、「Stylus」ではなく）に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。

新しく作成されたプロジェクトディレクトリに移動します。

cd angular-google-maps-example

プロジェクトフォルダから、次のコマンドを実行して@agm/coreをインストールします。

npm install @agm/[email protected]

注：現在、最新バージョンの3.0.0-beta.0リリースがあります。 このバージョンを使用する場合は、@types/googlemapsもインストールする必要があります。

ただし、このチュートリアルを検証する過程で、 @ types / googlemaps（v3.39.12）のダウングレードバージョンを使用し、最終的に @ agm / core（v1.1.0）をダウングレードする必要がある問題が発生しました。 エラーなしで長方形を使用します。

コードエディタでapp.module.tsを開き、@agm/coreをサポートするように変更します。

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

必ず'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'を実際のAPIキーに置き換えてください。

警告： APIキーは、意図しない目的で他のユーザーが使用できるため、パブリックリポジトリ（GitHubなど）にコミットするファイルには保存しないでください。

アプリケーションを使用する準備ができたら@agm/core、それを使用するためのカスタムコンポーネントを作成できます。

ステップ2—サンプルマップコンポーネントの構築

これで、カスタムマップコンポーネントを作成できます。

npx @angular/cli generate component MyAgmExample --flat=true --inlineStyle=true --inlineTemplate=true

これにより、src/appディレクトリに新しいMyAgmExampleコンポーネントが作成され、個別のCSSファイルまたはHTMLテンプレートファイルは作成されません。 また、この新しいコンポーネントをapp.module.tsに追加します。

新しいMyAgmExample.component.tsファイルを開き、agm-mapを使用するように変更します。

src / app / MyAgmExample.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-agm-example',
  template: `
    <agm-map
      [latitude]="lat"
      [longitude]="lng"
      [mapTypeId]="mapType"
    >
    </agm-map>
  `,
  styles: [
    'agm-map { height: 300px; }'
  ]
})
export class MyAgmExampleComponent implements OnInit {
  lat = 21.3069;
  lng = -157.8583;
  mapType = 'satellite';

  constructor() { }

  ngOnInit(): void { }
}

これにより、タイプsatellite、latitude（21.3069）、およびlongitude（-157.8583（ハワイ州ホノルル））の新しいマップが作成されます。

注：CSSでagm-map要素の高さを明示的に設定する必要があります。

app.component.htmlを変更して、この新しいmy-agm-exampleコンポーネントを使用します。

src / app / app.component.html

<my-agm-example></my-agm-example>

次に、アプリケーションを起動して、これまでの状況を確認します。

npm start

Webブラウザーでアプリケーションにアクセスすると、ハワイのホノルルを中心とした衛星ビューのGoogleマップが表示されます。

ステップ3—マーカーと境界を使用して高度なマップコンポーネントを構築する

<agm-map>コンポーネントのテンプレート内に、他の多くのコンポーネントを追加できます。 設定できる他の構成オプションもいくつかあります。 このチュートリアルでは、マップ上の図形の描画についてのみ説明しますが、使用可能なすべてのオプションについて完全なドキュメントを確認することをお勧めします。

<agm-map>コンポーネントを緯度と経度の値で初期化すると、マップはその特定の座標の中央に配置されます。 ただし、マップ上の任意の場所に任意の数のマーカーと図形を配置することもできます。

MyAgmExample.component.tsファイルを開き、agm-markerおよびagm-rectangleを使用するように変更します。

@Component({
  selector: 'my-agm-example',
  template: `
    <agm-map
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="2"
      (mapClick)="addMarker($event.coords.lat, $event.coords.lng)"
    >
      <agm-marker
        *ngFor="let marker of markers"
        [latitude]="marker.lat"
        [longitude]="marker.lng"
        [opacity]="marker.alpha"
        [markerDraggable]="true"
        (markerClick)="selectMarker($event)"
      >
      </agm-marker>
      <agm-rectangle
        [north]="max('lat')"
        [east]="max('lng')"
        [south]="min('lat')"
        [west]="min('lng')"
      >
      </agm-rectangle>
    </agm-map>
    <p *ngIf="selectedMarker">
      Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}
    </p>
  `,
  styles: [
    'agm-map { height: 300px; }'
  ],
})

export class MyAgmAdvancedExample {
  lat = 48.75606;
  lng = -118.859;

  selectedMarker = null;

  markers = [
    // These are all just random coordinates from https://www.random.org/geographic-coordinates/
    { lat: 22.33159, lng: 105.63233, alpha: 1 },
    { lat: 7.92658, lng: -12.05228, alpha: 1 },
    { lat: 48.75606, lng: -118.859, alpha: 1 },
    { lat: 5.19334, lng: -67.03352, alpha: 1 },
    { lat: 12.09407, lng: 26.31618, alpha: 1 },
    { lat: 47.92393, lng: 78.58339, alpha: 1 }
  ];

  addMarker(lat: number, lng: number) {
    this.markers.push({ lat, lng, alpha: 0.4 });
  }

  max(coordType: 'lat' | 'lng'): number {
    return Math.max(...this.markers.map(marker => marker[coordType]));
  }

  min(coordType: 'lat' | 'lng'): number {
    return Math.min(...this.markers.map(marker => marker[coordType]));
  }

  selectMarker(event) {
    this.selectedMarker = {
      lat: event.latitude,
      lng: event.longitude
    };
  }
}

まず、マップ自体に2つの追加プロパティを設定しました。zoomへの入力とmapClickへのイベントハンドラーです。 ズームは、マップを最初に表示するためのインまたはアウトの距離を示します。 0は表示するのに最も遠い場所であり、地図の場所と種類によっては、最大で約22になります。 mapClickは、ユーザーがマップ上のどこかをクリックするたびにイベントを発行します。 この例では、ユーザーが地図をクリックすると、地図に新しいマーカーが追加されます。

マーカーは地図上のピンのようなものです。 それらには次の特徴があります。

• latitudeとlongitudeが必要です
• opacityマーカーの透明度を変更します
• markerDraggableこれにより、ユーザーはマーカーをクリックして押したまま、地図上でドラッグできます
• markerClickこれにより、ユーザーが単一のマーカーをクリックしたときにイベントを処理できます

このチュートリアルでは、markerClickがaddMarkerをトリガーし、別のopacityで新しいピンをドロップします。

コードには、マップのすべてのマーカーを保持する配列があります。 そして、この配列にはいくつかのランダムな場所が配置されています。

また、マップに長方形を追加しました。 長方形の境界（north、south、east、およびwest）は、マーカーのすべての緯度と経度の最も遠い極値によって計算されます。 この計算に基づいて、新しいマーカーが追加されるたびに、描画された長方形の外側にある場合、長方形は新しい外縁に再描画されます。

AgmPolygon、AgmCircle、AgmPolyLineもご利用いただけます。 最後に、AgmDataLayerを使用すると、 GeoJSON を使用して、これらのフィーチャのいずれかをマップ上に描画できます。

警告：実験が終了したら、誤用の可能性を避けるために、Google Cloud ConsoleにログインしてAPIキーを削除し、関連する請求先アカウントを削除することをお勧めします。

これで、マーカーと長方形の形状を備えたGoogleマップができました。

結論

このチュートリアルでは、Angularアプリケーションで@agm/coreとGoogleMapsAPIの機能を使用する方法を学びました。

これは、訪問者にビジネスの場所、旅行先、および興味のあるポイントを表示する大きな可能性を秘めています。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。