ishikawaGoogle Maps APIを使って、サイト上に地図を表示するまでの流れ
Google Maps APIを使用する場合、2016年6月22日よりAPIキーが必須になりました。
参考:標準プランのアップデート | Google Maps API の価格とプラン | Google Developers
今回はAPIキーを取得して、サイト上に地図を表示するまでの流れを試してみます。
今回使用するのは、以下のJavaScript APIになります。
Google Maps JavaScript API | Google Developers
APIキーの取得
APIキーの取得にはGoogleアカウントが必要になりますので、事前に用意しておいてください。
Googleアカウントにログイン後、こちらのページにアクセスして、右上の「キーの取得」をクリックします。
「Select or create project」をクリックして、「Create a new project」を選択します。
既存のプロジェクトを使いたい場合、そのプロジェクトを選択してください。
プロジェクトのデフォルトがMy Projectとなっているので、プロジェクト名を変更します。
今回は「tipsnote-test」としました。
プロジェクト名変更後、「CREATE AND ENABLE API」をクリックします。
APIキーが生成できました。
使用範囲の設定
APIキーの生成はできましたが、このままだと誰でもAPIキーを使えてしまうので、使用範囲を制限しておきます。
先ほどのAPIキー生成画面右下の「API Console」をクリックします。
「キーの制限」の項目を変更します。
今回はサイト内で使用するので、「HTTP リファラー（ウェブサイト） 」を選択します。
次にリファラーの設定を行います。
ここではAPIキーを使用するサイトを入力します。
例えば、「https://www.tam-tam.co.jp/」で使用したい場合は「tam-tam.co.jp/*」のようにします。
設定が完了したら保存をクリックします。
これで使用範囲の設定は完了です。
APIキーの使い方
Google Maps JavaScript APIを読み込む際に、パラメーターのkeyの値としてAPIキーを指定すればOKです。
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキーをここに指定】"></script>
実際に簡単な地図をサイト上に表示してみます。
地図を埋め込む場所を指定します。
<div id="sample"></div>
地図のサイズをCSSで指定します。
#sample {
width: 700px;
height: 400px;
}
JavaScriptで地図を埋め込む記述を追加します。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
center: { // 地図の中心を指定
lat: 34.7019399, // 緯度
lng: 135.51002519999997 // 経度
},
zoom: 19 // 地図のズームを指定
});
}
上記JavaScriptの後に、Google Maps APIを読み込む記述を追加します。
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキーをここに指定】&callback=initMap"></script>
実際のソースコード一式はサンプルページをご確認ください。
Google Maps APIを使って、サイト上に地図を埋め込むことができました。
【参考サイト】
