登录
注册

API キーなしでサイトに Google マップを表示（埋め込みコード）

2022-01-07 下午9:55 作者：Mr.Fong 分类：WordPress 77

Web サイトに Google マップを表示させるには以下のような方法があります。

  • Google Maps API を使って表示
  • 埋め込みコードを使って表示

Google Maps API を使うといろいろなカスタマイズが可能ですが、使用するには API キーを取得する必要があります。関連ページ：Google Maps API の使い方・利用方法

あまりカスタマイズすることはできませんが「埋め込みコード」を使う場合は、API キーは不要で簡単に以下のような Google マップを表示することができます。

基本的な実装方法

以下が大まかな手順です。

  1. Google マップで目的地を検索して表示
  2. 「共有」をクリック
  3. 「地図を埋め込む」をクリック
  4. 「HTML をコピー」をクリック
  5. コピーした HTML を表示したい位置にペースト（貼り付け）

Google マップの HTML を取得

Google Maps （https://www.google.com/maps/?hl=ja）を開いて左上の入力欄に表示したい場所の名前や住所を入力して目的地の地図を表示し、「共有」をクリックします。

「地図を埋め込む」をクリックします。

地図のプレビュー画面が表示されます。iframe タグの左に表示されている「中」をクリックすると表示するマップのサイズを変更することができます。

小、中、大のいずれも縦横比は4：3で、単位は px （ピクセル）です。

  • 小： 400 X 300
  • 中： 600 X 450
  • 大： 800 X 600
  • カスタムサイズ：サイズを指定

「カスタムサイズ」を選択すると以下のような表示になり、独自のサイズを指定することができ、「実サイズでプレビュー」をクリックしてそのサイズのマップを確認することができます。

または、コピーした HTML の width と height を編集してサイズを変更することもできます。

「HTML をコピー」をクリックして Google マップを表示する HTML をコピーします。

「クリップボードにコピーしました」と表示されたら、表示したい場所にコードをペーストします。

コピーした HTML の例

  1. <iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3240.88852697053!2d139.8059981!3d35.6797467!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2z44CSMTM1LTAwMjIg5p2x5Lqs6YO95rGf5p2x5Yy65LiJ5aW977yU5LiB55uu77yR4oiS77yRIOadseS6rOmDveePvuS7o-e-juihk-mkqA!5e0!3m2!1sja!2sjp!4v1621326065459!5m2!1sja!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>

loading=”lazy” は遅延読み込みのための属性（loading 属性）で、サポートされているブラウザでは遅延読み込みが行われます。

地図の縮尺やタイプ

表示する地図の縮尺やタイプ（地図または航空写真）は、目的地の地図を表示して「共有」をクリックする前に調整します。

縮尺（ズームレベル）は右下の「＋」や「ー」をクリックするか、マウスでスクロールして調整できます。航空写真への切り替えは左下のアイコンをクリックするか、メニューボタンからも選択できます。

縮尺やタイプを調整後、「共有」をクリックして「地図を埋め込む」をクリックし、表示される地図を確認して問題がなければコピーします。

レスポンシブ表示（CSS）

コピーした HTML をそのまま貼り付けただけでは、固定幅のマップになっているので画面サイズに応じて伸縮するようにします。

Google マップをレスポンシブに表示する１つの方法は、地図を表示する iframe 要素を div 要素で囲み、その div 要素を表示の基準としてそのパディング領域に地図を表示します。

例えば、以下のようにコピーした HTML を class=”googlemap” を指定した div 要素で囲みます。

  1. <div class=“googlemap”>
  2. <iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3240.88852697053!2d139.8059981!3d35.6797467!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2z44CSMTM1LTAwMjIg5p2x5Lqs6YO95rGf5p2x5Yy65LiJ5aW977yU5LiB55uu77yR4oiS77yRIOadseS6rOmDveePvuS7o-e-juihk-mkqA!5e0!3m2!1sja!2sjp!4v1621326065459!5m2!1sja!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  3. </div>

そして、以下の CSS を設定して適用させます。

  1. .googlemap {
  2. position: relative; /* 子要素の基準とする */
  3. padding-bottom: 75%; /* 表示するパディング領域の縦横比（4：3） */
  4. height: 0;
  5. overflow: hidden;
  6. }
  7. .googlemap iframe {
  8. position: absolute; /* 親要素のパディング領域に配置するために絶対配置を指定 */
  9. top: 0; /* 垂直方向トップに配置 */
  10. left: 0; /* 水平方向左に配置 */
  11. width: 100%; /* 親コンテナの幅いっぱいに表示 */
  12. height: 100%; /* 親コンテナの高さいっぱいに表示 */
  13. }

上記の設定で、Google マップを親要素コンテナの幅いっぱいに表示することができ、親要素の幅に合わせて伸縮します。

Google マップを表示する際に、最大幅を設定するには、さらに外側に div 要素を追加し、その div 要素に必要な max-width などのスタイルを指定します。

以下は class=”map-wrapper” を指定した div 要素を追加し、最大幅を 640px にして枠線を設定する例です。枠線の有無やパディング、マージンは環境に合わせて設定します。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap”>
  3. <iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3240.88852697053!2d139.8059981!3d35.6797467!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2z44CSMTM1LTAwMjIg5p2x5Lqs6YO95rGf5p2x5Yy65LiJ5aW977yU5LiB55uu77yR4oiS77yRIOadseS6rOmDveePvuS7o-e-juihk-mkqA!5e0!3m2!1sja!2sjp!4v1621326065459!5m2!1sja!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>

以下の例では .googlemap の padding-bottom を 56.25% に指定して、表示する地図の縦横比を 16:9（9 ÷ 16 x 100 = 56.25%）としています。

  1. .map-wrapper {
  2. max-width: 640px; /* 最大幅 */
  3. min-width: 280px; /* 最小幅 */
  4. margin: 20px 0;
  5. padding: 4px;
  6. border: 1px solid #CCC; /* ボーダー（枠線） */
  7. }
  8. .googlemap {
  9. position: relative;
  10. padding-bottom: 56.25%; /* 縦横比を 16:9 */
  11. height: 0;
  12. overflow: hidden;
  13. }
  14. .googlemap iframe {
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. width: 100%;
  19. height: 100%;
  20. }

以下は上記の設定の表示例です。

英語で Google マップを表示

多言語サイトなどの場合には、日本語以外の言語で Google マップを表示することができます。

Google Maps を開いて目的地の地図を表示し、左上のメニューのアイコンをクリックします。

「言語」をクリックします。

「言語」を選択します。

「Share」（日本語の「共有」に該当）をクリックします。

「地図を埋め込む」ためのコードを取得するには「Embed a map」をクリックします。

あとは日本語の Google マップの場合と同じです。

以下は英語の Google マップとリンクの表示例です。

  1. <div class=“margin_top40”>
  2. <div class=“map-wrapper”>
  3. <div class=“googlemap sample-16×9”>
  4. <iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3240.88852697053!2d139.8059981!3d35.6797467!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2sMuseum%20of%20Contemporary%20Art%2C%20Tokyo%2C%204-ch%C5%8Dme-1-1%20Miyoshi%2C%20Koto%20City%2C%20Tokyo%20135-0022!5e0!3m2!1sen!2sjp!4v1621341943244!5m2!1sen!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  5. </div>
  6. </div>
  7. </div>
  8. <p><a href=“https://goo.gl/maps/mRBwYZiN48GVEVe78”>Open Map</a></p>

Open Map

Google マップでルートを表示

ある場所から目的地までのルートを表示することができます。以下が大まかな手順です。

  1. Google マップで目的地を検索して表示
  2. 「ルート・乗り換え」をクリック
  3. 必要に応じて交通手段を選択
  4. 「出発地」を入力
  5. メニューをクリックして「地図を共有または埋め込む」をクリック
  6. 「地図を埋め込む」をクリックして HTML を取得

Google Maps を開いて目的地の地図を表示し、「ルート・乗り換え」をクリックします。

必要に応じて交通手段（徒歩や公共交通機関など）を選択し、「出発地」を入力または地図上をクリックします。

メニューをクリックします。

「地図を共有または埋め込む」をクリックします。

「地図を埋め込む」をクリックします。マップのリンクの URL を取得する場合は「リンクをコピー」をクリックします。

必要に応じてサイズを選択して、「HTMLをコピー」をクリックしてコードを取得します。

「クリップボードにコピーしました」と表示されたら、表示したい場所にコードをペーストします。

以下は取得したコードをクラスを指定した div 要素で囲んで表示する例です（レスポンシブ表示  ）。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap”>
  3. <iframe src=“https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d6482.054127281494!2d139.8048068!3d35.6763356!3m2!1i1024!2i768!4f13.1!4m13!3e2!4m5!1s0x6018893dc19c7e69%3A0x6545c36eacca3d2b!2z5riF5r6E55m95rKz!3m2!1d35.6822525!2d139.79877779999998!4m5!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2z44CSMTM1LTAwMjIg5p2x5Lqs6YO95rGf5p2x5Yy65LiJ5aW977yU5LiB55uu77yR4oiS77yRIOadseS6rOmDveePvuS7o-e-juihk-mkqA!3m2!1d35.679746699999995!2d139.80819209999999!5e0!3m2!1sja!2sjp!4v1621382274117!5m2!1sja!2sjp” width=“600” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>

付近を検索

Google マップの機能の「付近を検索」を使った検索結果の地図も表示することができます。

手順は前述の「Google マップでルートを表示」とほぼ同じです。以下が大まかな手順です。

  1. Google マップで目的地を検索して表示
  2. 「付近を検索」をクリック
  3. 検索を実施
  4. メニューをクリックして「地図を共有または埋め込む」をクリック
  5. 「地図を埋め込む」をクリックして HTML を取得

Google Maps を開いて目的地の地図を表示し、「付近を検索」をクリックします。

検索ボックスで検索します。

検索結果の地図が表示されるので、問題なければメニューをクリックします。

「地図を共有または埋め込む」をクリックします。

「地図を埋め込む」をクリックします。マップのリンクの URL を取得する場合は「リンクをコピー」をクリックします。

必要に応じてサイズを選択して、「HTMLをコピー」をクリックしてコードを取得します。

「クリップボードにコピーしました」と表示されたら、表示したい場所にコードをペーストします。

以下はカスタムサイズ（800×450）を指定して取得したコードをクラスを指定した div 要素で囲んで表示する例です（レスポンシブ表示  ）。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap sample-16×9”>
  3. <iframe src=“https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3240.887998446149!2d139.80600341588791!3d35.67975971297691!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z6aeQ6LuK5aC0!5e0!3m2!1sja!2sjp!4v1621575876894!5m2!1sja!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>

白黒やセピア色で表示（CSS filter）

CSS の filter を使って Google マップの表示をカスタマイズすることができます。

filter を適用するのは iframe に対してです。

以下の例では次のように地図を埋め込む HTML を取得して、その iframe を div 要素で囲んでクラス（以下の場合は .gmap-gray-scale）を指定してスタイルを設定します。

.map-wrapper と .googlemap はレスポンシブ用のクラス  です。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap gmap-gray-scale”>
  3. <iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12820.042977040894!2d138.21363194495473!3d36.55385387999964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d9abe53f55355%3A0xe488a003d1e8ed64!2z55qG56We5bGx!5e0!3m2!1sja!2sjp!4v1621644276057!5m2!1sja!2sjp” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>

CSS filter のブラウザ対応状況：caniuse:CSS Filter Effects

グレースケールで表示

filter に grayscale(100%) を設定すると白黒で表示することができます。

以下の例では、grayscale() に 100%（完全に白黒）を指定していますが、値は 0～100% の範囲で指定できます。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap gmap-gray-scale”>
  3. <iframe src=“・・・中略・・・” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>
  1. .gmap-gray-scale iframe{
  2. filter: grayscale(100%);
  3. }

セピア色で表示

セピア色で表示するには filter に sepia() を設定します。但し、sepia() だけでは明るくなりすぎてしまうので、その前に brightness() を適用して明るさ（明度）を下げています。

以下では sepia() に 90% を指定していますが、grayscale 同様、値は 0～100% の範囲で指定できます。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap gmap-sepia”>
  3. <iframe src=“・・・中略・・・” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>
  1. .gmap-sepia iframe {
  2. filter: brightness(82%)sepia(90%);
  3. }

色相の回転

filter に hue-rotate() を設定すると色相を変更することができます。

値 は 0〜360 の範囲で単位は deg を指定します。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap gmap-hue-rotate”>
  3. <iframe src=“・・・中略・・・” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>
  1. .gmap-hue-rotate iframe {
  2. filter: hue-rotate(180deg);
  3. }

ホバー時に表示を変更

以下は transition を使ってホバー時に通常の表示（grayscale() を 0%）にする例です。

  1. <div class=“map-wrapper”>
  2. <div class=“googlemap gmap-gray-scale-hover”>
  3. <iframe src=“・・・中略・・・” width=“800” height=“450” style=“border:0;“ allowfullscreen=“” loading=“lazy”></iframe>
  4. </div>
  5. </div>
  1. .gmap-gray-scale-hover iframe{
  2. filter: grayscale(100%);
  3. transition: filter 0.5s ease-in-out;
  4. }
  5. .gmap-gray-scale-hover iframe:hover{
  6. filter: grayscale(0%);
  7. }

関連ページ：CSS3 プロパティ（filter） ｜ CSS3 アニメーション（transition）

iframe でパラメータを指定

API キーを使わない方法として、iframe の src 属性の URL にパラメータ（クエリ文字列）を指定して Google マップを表示することができます。

※ 但し、この方法が正式にサポートされているかは不明で、将来的に使用できなくなる可能性があります。以下の方法は API キーは使いませんが、Maps Embed API を使用します。

例えば、このページを Chrome のエクステンション「Google Maps Platform API Checker」でチェックするとアイコン（ピン）の色はグレーでクリックすると以下のように表示されます。

INFO: このサイトは、Maps Embed APIを使用していていることを検知しました。(詳細).

但し、「共有」を使って表示している Google Map でも API Checker で確認すると同じように表示されるので、この使い方に問題があるかどうかはわかりません。

関連項目：API キー・チェックツール

Maps Embed API Usage and Billing には以下が記載されています。

Reminder: To use the Maps Embed API, you must include an API key with all API requests.

「注意: Maps Embed API を使用するには、すべての API リクエストに API キーを含める必要があります」とあるので、本来は Maps Embed API を使用するには API キーを使った方が良さそうです。

API キーを取得するのは面倒ですが、Maps Embed API Usage and Billing には Maps Embed API リクエストはすべて無料で、無制限に使用できると記載されています（1秒間のリクエストの上限は500）。

関連項目：Google Maps Embed API

使い方

iframe の src 属性の URL の maps の後に「?」を追加し、パラメータの名前と値を「名前=値」の形式で指定します（クエリ文字列を使って表示する地図の設定を渡します）。

埋め込みで表示するのでパラメータ output の値に embed を output=embed のように指定します。

複数のパラメータを指定するにはパラメータの名前と値のペア（name=value）を「&」で繋げます。

「?」は URL クエリパラメータ（クエリ文字列）の開始を意味し、先頭に一度だけ記述します。

https://maps.google.com/maps?output=embed&name1=value1&name2=value2&・・・”

指定するパラメータの順番は特に決まりはなく、output=embed を最後に記述しても問題ありません。

また、ホスト名部分は maps.google.com でも maps.google.co.jp でもどちらでも大丈夫です。

以下の例では q というパラメータに値として場所の名前「東京都現代美術館」を指定して地図を表示しています。指定できる主なパラメータは以下の表  を参照ください。

width や height などの属性は見やすいように改行して表示しています。

  1. <iframe src=“https://maps.google.co.jp/maps?output=embed&q=東京都現代美術館”
  2. width=“800”
  3. height=“450”
  4. style=“border:0;“
  5. allowfullscreen=“”
  6. loading=“lazy”>
  7. </iframe>

上記のようにパラメータに日本語を指定しても問題なく表示されますが、本来ならば（？） URL エンコードした値を指定します。以下の例は「東京都現代美術館」を URL エンコードした値「%E6%9D%・・・%E9%A4%A8」を指定しています。

以下のページで値を URL エンコードすることができます。

URI エンコード変換ツール

  1. <iframe src=“https://maps.google.co.jp/maps?output=embed&q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E7%8F%BE%E4%BB%A3%E7%BE%8E%E8%A1%93%E9%A4%A8”
  2. width=“800”
  3. height=“450”
  4. style=“border:0;“
  5. allowfullscreen=“”
  6. loading=“lazy”>
  7. </iframe>

以下が上記の記述で表示される地図の例です。

以下は q パラメータに緯度と経度を、z パラメータにズームレベルの値 18 を指定して表示する例です。

  1. <iframe src=“https://maps.google.com/maps?output=embed&q=35.67952880671921,139.8086534379264&z=18”
  2. width=“800”
  3. height=“450”
  4. style=“border:0;“
  5. allowfullscreen=“”
  6. loading=“lazy”>
  7. </iframe>

上記は以下のような地図を表示します。

以下は指定できるパラメータの例です。

クエリパラメータ
名前 意味（指定可能な値）
q マーカーを表示する位置を指定します。値は場所の名前、住所、緯度と経度（カンマ区切り）などを指定できます。文字は URL エンコードします。
緯度と経度で指定する例：q=35.67952880671921,139.8086534379264
z 縮尺（ズームレベル）の値。0～21 の数値で指定します。大きな値ほど拡大されて表示されます。
ll 地図の中心位置座標をカンマ区切りの緯度経度で指定します（例：37.4218,-122.0840）。指定しない場合は q パラメータで指定した場所や住所から自動的に設定されます。パラメータ名は小文字のエル2つ（おそらく latitude と longitude）。
t 表示モード（タイプ）。値には以下を指定できます。

  • m：地図
  • k：航空写真
  • h：地図+航空写真
  • p：地形図
  • e：Google Earth
hl 言語。デフォルトはユーザーのブラウザに設定されている言語です。日本語は「ja」、英語は「en」です。どの言語が指定できるかは、Google マップを表示して、メニューのアイコンをクリックし「言語」をクリック  して確認できます。値は表示したい言語を選択して表示されるマップの URL の最後に hl=xx のように言語が設定されています。

以下は z に 18 を、ll に緯度経度（35.68106645142036, 139.7977517138129）を、hl に en を指定して地図を表示する例です。

  1. <iframe src=“https://maps.google.com/maps?output=embed&z=18&ll=35.68106645142036, 139.7977517138129&hl=en”
  2. width=“800”
  3. height=“450”
  4. style=“border:0;“
  5. allowfullscreen=“”
  6. loading=“lazy”>
  7. </iframe>

緯度経度の取得

緯度と経度は Google マップ上で右クリックして取得することができます。

右クリックして表示される緯度経度をクリックするとコピーできます。

または「この場所について」をクリックして表示されるウィンドウからも取得できます。またそのウィンドウの緯度経度をクリックするとその位置にマーカーが表示されます。

相关推荐

最新文章

分类