Google Maps API 学習ノート – 1：地図、マーカー、カスタムスタイル
この記事の概要：
- Google Maps APIが月ごとの無料枠を提供していることについて
- Google Maps APIキーの申請方法
- Maps Javascript APIの使用開始
- 複数のマーカーを設置する方法
- マーカー（Marker）のカスタマイズ方法
- Googleがデフォルトで用意している4種類のアイコンについて
- 画像ファイルを直接読み込む方法
- マーカーのその他2つのパラメータについて
- 情報ウィンドウ（Info Windows）について
- マップスタイルのカスタマイズ方法
- ナイトモードの地図について
- 重要な2つのリンクについて
- 地図上の他のビジネスを非表示にする方法
- 地図上のUIを非表示にする方法
- この記事のソースコードのダウンロード
- Google Maps API学習ノートシリーズ
Google Maps APIが月ごとの無料枠を提供しているとは
以前からGoogle Maps APIが有料と聞いて敬遠していたが、最近友達から質問されて調べ直したところ、公式サイトによると毎月200ドルの無料枠があることが分かった。
Google Maps API料金表：https://cloud.google.com/maps-platform/pricing/sheet/?hl=zh-tw
このノートは、「Get an API Key」から「Interacting with the Map」までの学習記録であり、実際に手を動かしながら学ぶ内容である。
Google Maps APIキーの申請方法
APIキーはGoogle Cloud Platform（GCP）から申請する必要がある。新しいプロジェクトを作成し、プロジェクト名を入力後に確認すると、新しいプロジェクトが作成される。
Maps関連の複数のAPIがあるが、ここでは「Maps Javascript API」を使用する。アクティブにした後、APIキーを生成し、リストリクションを設定してAPIキーの不正使用を防ぐ。
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
Maps Javascript APIの使用開始
HTMLページを作成し、以下のようにMap JSを引用する：
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
マップを初期化した後、マーカー（marker）を設置する。
複数のマーカーを配置する方法
マーカーを配置するとき、ローカルファイルのmap.geojsonをGETメソッドで読み込み、そのデータから複数の位置を設定する。
マーカー（Marker）のカスタマイズ
Google Maps APIでは、マーカーのアイコンをカスタマイズできる。Googleが提供しているデフォルトのアイコンを利用するか、画像ファイルを読み込むことでカスタムアイコンを使用することができる。
var marker = new google.maps.Marker({
position: latLng,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map
});
情報ウィンドウ（Info Windows）
マーカーに情報ウィンドウを設置することもできる。これはクリックイベントの監視を行い、ウィンドウを開く動作を実装する。
let infoWindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
マップスタイルのカスタマイズ
APIを使用してカスタムスタイルの地図を作成することができる。例えば、ナイトモードやビジネスの非表示が可能である。
地図上のUIを非表示にする
Google MapsのデフォルトUIもAPIを介して非表示に設定することが可能である。
この記事のソースコードのダウンロード
Google Maps APIに関する公式ドキュメントは幅広い内容を提供しているが、この記事では今後必要となる機能を記録した。
ソースコードはGitHubにて提供されている。
https://github.com/letswritetw/letswrite-google-map-api-1
Google Maps API 学習ノートシリーズ
- 地図、マーカー、カスタムスタイル
- 地図上で日本結界を描く
- 全台湾の12時間雨量分布をヒートマップで作成
- Place APIで自動完了するアドレス、レビュー要約
- 現在位置を取得し、各地点との距離を計算
- 新型コロナウイルス分布マップを描く
以上が日本語に翻訳された記事の内容です。コードブロック内のプログラミング言語の指定や、マークダウンのフォーマットはそのまま使用されています。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/letswrite/google-maps-api-xue-xi-bi-ji-1di-tu-biao-ji-ke-zhi-yang-shi-2192
