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の取得や管理)

Google Cloud Platform
Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

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

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

・Maps JavaScript API 解説

Overview  |  Maps JavaScript API  |  Google Developers
Get started with the Google Maps JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.

 

 

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

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

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

Marker Clustering  |  Maps JavaScript API  |  Google Developers

 

 

コメント