GoogleMapをサイトに埋め込む！2021年最新版

Google Mapを直接サイト内に埋め込み表示する方法です。ただ単に埋め込むというのではなくGoogle Apiを使用してマーカーを変えたりカスタマイズしたGoogleMapの埋め込みの方法です。※直接埋め込みの話も追記済み。

数年前の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 lets you build, deploy, and scale applications, websites, and services on the same infrastructure as Google.

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

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

・Maps　JavaScript　API 解説

Overview | Maps JavaScript API | Google for 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など任意に作成すれば、マーカの位置を地図の中心ではない場所にすることも可能です。※この辺はプログラムの知識が少しある方ならわかると思います。