Google Maps APIを使ってWebサイトに地図を埋め込む方法

2018.03.06 Google map, Web制作

Google Maps APIを使うと、マーカーが配置されたGoogleマップをWebサイトに表示させることができます。ここではマップの表示に必要となるAPIの取得と、サイトへの挿入方法を解説します。

Webサイトへのマップ表示

ホームページにアクセスマップを表示している企業がよくありますよね。

今回はマーカーが配置されたGoogleマップをウェブサイトに追加する方法について順を追って説明します。

目標はWebサイトにこのように表示させることです。

このマップはモノクロ表示にしたり、マーカーをオリジナルに変更したりとカスタマイズも可能になります。

カスタマイズの方法については長くなるので次回以降に説明していきます。

マップ挿入の手順

ではさっそくマップを表示させる手順を説明していきます。

手順は以下の４ステップです。

Step.1 HTMLのコードを追加する

Step.2 CSSを追加する

Step.3 APIキーを取得する

Step.４ Scriptを追加する

Step.1 HTMLのコードを追加する

まず、マップを表示させたい位置に下記のHTMLのコードを追加します。

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

id は　”map”　以外でも大丈夫ですが、後ほど設定するCSS、Scriptの中でも同じ　id　を指定する必要があります。

Step.2 CSSを追加する

次にマップの基本的なスタイルの設定をするために、以下のCSSを読み込みます。

#map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }

width と height は自由に設定してください。レスポンシブデザインの場合は width を 100% に設定しておくとウィンドウサイズに合わせてサイズが変更されます。

#map の部分は先ほどHTMLで指定した id と同じになります。

Step.3 APIキーを取得する

次に、APIキーを取得します。
下記のURLにアクセスし、Googleアカウントを使ってログインします。

Maps JavaScript API

上部右の方にあるキーの取得をクリックします。

Select or create projectをクリックします。

＋Create a new projectを選択

好きなプロジェクト名を入力し、NEXTをクリック

これでAPIキーが取得できました。

このままだと誰でもAPIキーを使用できる状態になっているので、使用範囲制限の設定をします。

API Consoleをクリックします。

「キーの制限」の設定で、HTTP リファラー（ウェブサイト）を選択します。

「このHTTP リファラー（ウェブサイト）からのリクエストを受け入れる」の項目にマップを設置したいホームページのドメインを入力し、保存します。

この時、ドメインの前後に*（アスタリスク）を入れるのを忘れないようにしてください。

次のページで表示されるAPI　キーをコピーしておきます。

Step.４ Scriptを追加する

HTML内に以下のJavascriptを追加します。

<script>
    function initMap() {
        var latlng = new google.maps.LatLng( 34.808502, 135.639683 );//中心の緯度, 経度
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,//ズームの調整
          center: latlng//上で設定した中心
        });
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
      }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=initMap"></script>

var latlangの部分にはマーカーを置く場所の緯度と経度を設定します。

zoomの値は自由に設定してください。

[取得したAPIキー]の部分には先ほどコピーしたAPIキーを入力してください。（※［］は必要ありません）

※緯度と経度の取得方法は緯度と経度の確認、入力を参考にしてください。