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

GoogleMapをサイトに埋め込みする方法

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 解説

概要  |  Maps JavaScript API  |  Google Developers
Google Maps JavaScript API のスタートガイド簡単なサンプルを確認し、その概念を理解して、サイトにオリジナルのマップを作成しましょう。

 

 

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

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

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

マーカー クラスタ  |  Maps JavaScript API  |  Google Developers

Google Mapをコピペで簡単に埋め込みたい

以上は、GoogleMapを自由にカスタマイズして埋め込む方法でしたが、Googleのデフォルトの表示でGoogleMapを自サイト内に埋め込む方法です。基本コピペするだけの簡単な方法になります。

GoogleMapの埋め込み方法

1 GoogleMapで表示したい場所を選択

2 共有を選択

3 「地図を埋め込む」タブをクリック

4 「HTMLをコピー」をクリック

5 表示したいHTMLのソース画面にコピぺのペースト

※iframeというhtmlタグが挿入されます。5でブログなどのソースをペーストする際には、ブログの編集モードを「表示・ビジュアル」から「テキスト・htmlモード」に切り替えてください。

これだけですので、簡単です。2021年時点埋め込みタグはlazyloadにもデフォルトで対応するコードに切り替わっています。

APIを使ったカスタマイズ埋め込みは、表示回数の制限があります。地図表示ページでPVを多く稼ぐようなサイトは、APIを使用せず普通にiframeで埋め込むだけの方が無難といえるかもしれません。

 

 この記事の閲覧数:2,704 ビュー

コメント