Site icon Tips Note by TAM

Google 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を使って、サイト上に地図を埋め込むことができました。

【参考サイト】