Googleマップを iframe でウェブページに埋め込む
= 住所・ランドマーク・座標などから地図を作成 =

 Googleマップを自分のウェブページに掲載したい場合、「APIキー」を取得して使う方法がありますが、この仕組みが2018年7月から一定の利用数を超すと有料となりました。

 そのために、有料化への対応をしていない場合、地図にグレーのフィルターがかかるということが起きてしまいます。

 ここでは、「APIキー」を使わずに「インラインフレーム( iframe )」という仕組みを使ってGoogleマップを自分のウェブページに掲載する方法を紹介します。

《Googleマップのコードを取得し、ページに埋め込む手順》
  1. Googleマップ  で場所を検索。
  2. 検索の方法は、住所・ランドマークでの検索、もしくは座標(緯度経度)での検索。
  3. 地図、写真などのタイプを決める。
    • *コードに直接書く場合は、下記の設定ができる。
    • t=m 地図
    • t=h 地図+航空写真
    • *ストリートビューや地形図は表示できないようなので、完成した地図上の をクリックし、左上のメニューアイコン から開いて見る。
  4. ズーム率を確定する。
    • *コードに直接書く場合は、下記の設定ができる。
    • z=0 から、z=23 まで
  5. 左上のメニューアイコン をクリック。
  6. [地図を共有または埋め込む] をクリック。
  7. [地図を埋め込む] をクリック。
  8. [HTML をコピー] をクリック。
  9. サイズは、テキストボックスの左にある下矢印アイコンをクリックして「小」「中」「大」「カスタム」を選択することができる。ただし、「%」での設定はできない。(デフォルトのサイズは、「中」の「width="600" height="450"」となっているので、HTML内で「width="100%" height="500"」など、ページに合わせて修正)
  10. テキストボックスのテキストをコピーし、 HTMLに貼り付ける。
  11. コードに直接書く場合は、言語の設定ができる。
      〔言語の例〕
    • 日本語:hl=ja
    • 英語:hl=en
    • 韓国語:hl=ko
    • 中国語簡体:hl=zh-CN
    • 中国語繁体:hl=zh-TW など。
    •  *他の言語の設定はこちらのページを参考に  
《目次》
 ① Googleマップに座標を入力して検索し、コードを取得  
 ② Googleマップに住所・ランドマークなどを入力して検索し、コードを取得  
 ③ コードに座標を直接入力 Ⓐ(センターマーカーを表示しない)  
 ④ コードに座標を直接入力 Ⓑ(センターマーカーを表示する)  
 ⑤ コードに座標を直接入力 Ⓒ(センターマーカーと表示中心位置を変える  
 ⑥ コードに住所・ランドマークなどを直接入力(センターマーカーを表示)  
 ⑦ コードに住所・ランドマークなどを直接入力(センターマーカーと表示中心位置を変える)  
 ⑧ 表示する言語を、英語( hl=en )にする例  
① Googleマップに座標を入力して検索し、コードを取得
《この地図のコードサンプル》
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.3326425623934!2d139.70214685694324!3d35.67022196781234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDQwJzEyLjgiTiAxMznCsDQyJzA5LjciRQ!5e0!3m2!1sja!2sjp!4v1571820504380!5m2!1sja!2sjp" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
② Googleマップに住所・ランドマークなどを入力して検索し、コードを取得
《この地図のコードサンプル》
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.3187664078118!2d139.70214997715243!3d35.670228498760295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cbac9b52cff%3A0x560d87a8e2d1d3d2!2z5Y6f5a6_6aeF!5e0!3m2!1sja!2sjp!4v1571819367477!5m2!1sja!2sjp" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
③ コードに座標を直接入力 Ⓐ(センターマーカーを表示しない)
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&ll=35.6702285,139.7026976&t=m&hl=ja&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
④ コードに座標を直接入力 Ⓑ(センターマーカーを表示する)
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&q=35.6702285,139.7026976&t=m&hl=ja&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
⑤ コードに座標を直接入力 Ⓒ(センターマーカーと表示中心位置を変える)
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&q=35.6702285,139.7026976&ll=35.6691857,139.7008057&t=m&hl=ja&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
⑥ コードに住所・ランドマークなどを直接入力(センターマーカーを表示)
 *航空写真で表示( t=h )
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&q=原宿駅&t=h&hl=ja&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
⑦ コードに住所・ランドマークなどを直接入力(センターマーカーと表示中心位置を変える)
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&q=原宿駅&ll=35.6691857,139.7008057&t=h&hl=ja&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
⑧ 表示する言語を、英語( hl=en )にする例
《この地図のコードサンプル》
<iframe src="https://maps.google.com/maps?output=embed&q=原宿駅&t=m&hl=en&z=18" width="100%" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

おすすめサイト・関連サイト…

Last updated : 2024/06/29