GoogleMapをサイトに埋め込む!2018年最新版

Google Mapを直接サイト内に埋め込み表示する方法です。

数年前のGoogle Map Api3 Versionを使用していて特に問題はなかったのですが、最近は古くからあるドメインでもAPI KEYが要求されるようになりましたね。昨日まで普通に表示されていたGoogleMapが、ある日から急にAPI KEYエラーが表示されるようになったりましています。

API KEYは、Googleのアカウントがあれば、Google Developer Console →Google cloud Console「認証の作成」で無料で発行でき、使用が可能です。

・Google Cloud Console  (2018年秋頃より統合?API KEYの取得や管理)

https://console.cloud.google.com/apis/

今回は、即席のコードメモなのでAPIKEYの取得と設定については割愛します。一言だけ。認証制限のかけ方ではまる人が多いと思いますが、困ったら、記載は「http(s)://ドメイン/*」又は、「http(s)://*.ドメイン/*」でOKです((s)=SSLの場合)。「*」はワイルドカードで、何でもOKという意味です。あと、使用するドメインの所有確認も忘れずしておいてください。

さて、本題の埋め込み方法ですが、最新の埋め込みのコードを下記Google Mapのチュートリアル(英語)から調べました。

・Maps JavaScript API 解説

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

 

 

1. Google Mapを表示させる方法(ノーマルバージョン)

 <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>

上記コード+

・cssでGoogleMapが表示されるエリア、「#map」に {height:300px;}などで幅を指定。

・Yout_API_KEY に取得した当該サイト用のAPI KEYを入力。

・表示させる地図は、”center:”の値のlat/lngで任意の場所を指定。拡大は”zoom:”の値

で指定した地図が<div id=”map”></div>のエリアに表示されます。

 

Google Map内にマーカーを表示させたい場合

   <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

上記コード+

・cssでGoogleMapが表示されるエリア、「#map」に {height:300px;}など幅を指定。

・Yout_API_KEY に取得した当該サイト用のAPI KEYを入力。

・表示させる地図は、”uluru”の値のlat/lngで任意の場所を指定。拡大は”zoom”の値

で指定した地図の中央にマーカも表示されます。

コードの中を見てみると、地図の中央をマーカの表示位置としても受け取るために、地図の中心を変数uluruに格納していますね。そこで、マーカー表示位置で受け取るポジションをuluru2など任意に作成すれば、マーカの位置を地図の中心ではない場所にすることも可能です。※この辺はプログラムの知識が少しある方ならわかると思います。

 

3. 複数のマーク位置をクラスタリング表示する

Google内に複数のマーキングを行い、それらをクラスタリング(集積)表示させる使い方もできます。地図の拡大に応じて、エリアごとに集合したマーキング数が表示されます。一般的にはあまる使い道がない気がしますが、チェーン店が複数ある場合の表示とかでしょうか!?

説明は割愛しますが、基本的にはコードを張るのと集合表示用の画像をダウンロードして設置するだけいけるようです(試してませんが)。

気になる方は、下記チュートリアルを熟読してみてください。

https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja

 

 


Adv.

 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA