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/core
v1.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/core@1.1.0
注:現在、最新バージョンの3.0.0-beta.0
リリースがあります。 このバージョンを使用する場合は、@types/googlemaps
もインストールする必要があります。
ただし、このチュートリアルを検証する過程で、 @ types / googlemaps(v3.39.12)のダウングレードバージョンを使用し、最終的に @ agm / core(v1.1.0)をダウングレードする必要がある問題が発生しました。 エラーなしで長方形を使用します。
コードエディタでapp.module.ts
を開き、@agm/core
をサポートするように変更します。
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
を使用するように変更します。
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
コンポーネントを使用します。
<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トピックページで演習とプログラミングプロジェクトを確認してください。