はじめに
個人開発アプリを作成する過程で、Google Maps Javascript APIを使用しました。
JavaScriptの知識が必要ですが、意外と簡単に導入することができました。
今回はMaps JavaScript APIの始め方を解説します。
ここでは詳しく触れてませんが、オプションによって独自のカスタマイズができます。
公式ホームページ
https://developers.google.com/maps/?hl=ja
2018年6月からMaps JavaScript APIを使用するには、APIキーが必要となっています。
新しい料金体系では、毎月200ドル分までは無料で使用することが可能ですが、それを超えると利用料金を支払う必要があります。
Google Maps Platform - お客様のニーズに合わせた柔軟な料金設定
https://cloud.google.com/maps-platform/pricing?hl=ja
APIキーを取得する
プロジェクトに関連付けられたAPIキーが必要です。
APIキーを取得するには：
1.Google Cloud Platformのコンソール(https://console.cloud.google.com/)
へ行きます。
2.ヘッダーメニューのプロジェクトのドロップダウンをクリックして、APIキーを追加するプロジェクトを選択、または[新しいプロジェクト]から作成します。
3.左メニューの[認証情報]を選択します。。
4.[認証情報を作成]をクリックしてAPIキーを選択するとAPIキーを作成します。しばらくすると、ダイアログで新しく作成されたAPIキーが表示されます。
5.閉じるを クリックします。（本番環境で使用する場合はAPIキーを制限してください。）
6.画面上部の[APIとサービスを有効化]をクリック、もしくは左のメニューの[ライブラリ]を選択します
7.検索で Maps Jajascript APIと検索するか、左のカテゴリからマップを選択してMaps Jajascript APIをクリックします。
8.[有効にする] をクリックします。
Hello, World
以下の例は渋谷駅を中心としたマップを表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Simple Map</title>
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.6581, lng: 139.7017},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
非常にシンプルですが、この例の中には重要なことがいくつかあります。
-
<!DOCTYPE html>を使用してHTML5を宣言をします。 - マップを描画するために
<div>要素を作ります。 - JavaScriptで、にマップを作るための関数を定義します。
<script>タグを使用してMaps JavaScript APIをロードします。これらの手順を以下で説明します。
HTML5を宣言
<!DOCTYPE html>DOCTYPEでHTML5を宣言しています。描画領域の取得
<div id="map"></div>Webページにマップを表示するために、描画領域を作る必要があります。
<div>でその領域を作成します。扱いやすいようにid=mapとしておきます。<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>上記の例では、CSSを使用してmapの
heightを100%に設定しました。widthとheightは調整できます。
divは空要素の場合はheightは0になります。
そのため、必ず明示的にheightを設定する必要があります。
<body>と<html>もheightを明示的に宣言する必要があります 。Maps JavaScript APIの読み込み
Maps JavaScript APIを読み込むには
scriptタグで、次の例のようにsrc属性を指定します。<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>URLは、Maps JavaScript APIを使用するために必要なすべてのシンボルと定義を読み込むJavaScriptファイルの場所を指定しています。
このscriptタグは必須です。
async属性とdefer属性で非同期での読み込みをすることが推奨されています。
APIの準備ができると、callbackパラメーターを使用して指定された関数initMapを呼び出します。
initMapについては後ほど作成します。
YOUR_API_KEYは、取得したAPIキーに置き換えます。mapオブジェクト
map = new google.maps.Map(document.getElementById("map"), {...});マップを表すJavaScriptのクラスはMapクラスです。
newでこのクラスの新しいインスタンスを作成します。
第一引数にはマップを描画する領域を指定します。
ここではgetElementByIdを使って<div id="map">を指定しています。
新しく作成したMapオブジェクトを変数mapに代入します。
関数Map()の定義は、以下の通りです。Constructor Description Map(mapDiv:Node, opts?:MapOptions) HTML内のdiv要素で指定された領域に新しいマップを作成します。第1引数にマップを描画する領域を指定します。第2引数にオプションを指定します。 あとはオプションを指定して、
<div id="map">に新しいマップを作成します。オプション
第二引数にはマップを描画する際のオプションを指定します。
すべてのマップに必要なオプションが2つあります。
マップの中心点を指定するcenterとズームレベルを指定するzoomです。map = new google.maps.Map(document.getElementById('map'), { center: {lat: 35.6581, lng: 139.7017}, zoom: 8 });center マップの中心点
位置はlatitude（緯度）・longitude（経度）で指定します。
今回は予め調べておいた渋谷駅の値を使ってlatitudeに35.6581, longitudeに139.7017を指定します。zoom ズームレベル
マップを表示する初期解像度は
zoomプロパティで設定します。
zoom: 0は地球が完全にズームアウトされた状態で、ズームレベルが高いほど高い解像度でズームインします。
ズームレベルは整数で指定します。zoom: 8次のリストは各ズームレベルで表示されるおおよそのレベルを示しています。
- 1: 世界
- 5: 陸地/大地
- 10: 市
- 15: 通り
- 20: 建物
次の3つの画像は、ズームレベル0、7、18での渋谷の同じ場所を反映しています。
`zoom: 0`の渋谷です。世界地図ですね。
`zoom: 7`の渋谷です。なんとなく東京が中心になっているのがわかります。
`zoom: 15`の渋谷です。だいぶ近づいてきました。ハチ公前口などが見えます。
これでgoogle maps Javascript APIを使ってマップを描画することができました。
まとめ
-
<!DOCTYPE html>を使用してHTML5を宣言 - マップを描画するために
<div>要素を作る。 - JavaScriptで、にマップを作るための関数を定義
<script>タグを使用してMaps JavaScript APIをロード上記の4つに注意したら意外と簡単に実装できたかと思います。
必須のオプション以外に様々なオプションが用意されています。
オプションについてはまた別の機会に解説させていただければと思います。最後までお読みいただきありがとうございました。