Google Maps APIの利用前にAPIキーを取得する

一時期からAPIキーが必須になっていますので、APIキーの取得と設定方法についてまとめてみます。

APIキーの取得

Googleのアカウントにログインした状態でGoogle Maps APIのページにアクセスして、右上の「使ってみる」をクリックします。

APIの一覧が表示されるので、使用するAPIを選択します。
今回はウェブ API > Google Maps JavaScript APIを選択してみます。

右上の「キーの取得」をクリックします。

初めて使用する場合、プロジェクト名を入力してください。
入力後、NEXTをクリックします。

APIキーの取得が完了しました。
これでAPIを使用できるようになりましたが、このままだとAPIキーを誰でも使えてしまう状態なので、アプリケーションの制限を行います。
「API Console」をクリックします。

アプリケーションの制限

APIの設定画面が表示されるので、下部のアプリケーションの制限で「HTTP リファラー （ウェブサイト）」を選択します。

下部にURL入力エリアが出てくるので、使用するサイトURLを入力します。

今回は「cly7796.net/*」としました。
入力が完了したら保存します。

これで指定したURL以外からはAPIキーが使用できなくなりました。

サンプルコード

実際にAPIを使って地図を表示してみます。
地図を埋め込む位置に#mapを追加します。

<div id="map"></div>

</body>の直前にJavaScriptを読み込ませます。
【APIキー】の部分に先ほど取得したAPIキーを入れてください。

<script src="./sample.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap" async defer></script>

sample.jsに以下のように入力します。

JavaScript

var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 35.473183, lng: 138.57476399999996},
		zoom: 16
	});
}

APIを使って地図を埋め込むことができました。
Google Maps APIを使って地図を埋め込むデモページ