|
Googleマップを自分のウェブページに掲載したい場合、「APIキー」を取得して使う方法がありますが、この仕組みが2018年7月から一定の利用数を超すと有料となりました。
そのために、有料化への対応をしていない場合、地図にグレーのフィルターがかかるということが起きてしまいます。
ここでは、「APIキー」を使わずに「インラインフレーム（ iframe ）」という仕組みを使ってGoogleマップを自分のウェブページに掲載する方法を紹介します。
① Googleマップに座標を入力して検索し、コードを取得
《この地図のコードサンプル》
1 | <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マップに住所・ランドマークなどを入力して検索し、コードを取得
《この地図のコードサンプル》
1 | <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> |
③ コードに座標を直接入力 Ⓐ（センターマーカーを表示しない）
《この地図のコードサンプル》
1 | <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> |
④ コードに座標を直接入力 Ⓑ（センターマーカーを表示する）
《この地図のコードサンプル》
1 | <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> |
⑤ コードに座標を直接入力 Ⓒ（センターマーカーと表示中心位置を変える）
《この地図のコードサンプル》
1 | <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 ）
＊航空写真で表示（ t=h ）
《この地図のコードサンプル》
1 | <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> |
⑦ コードに住所・ランドマークなどを直接入力（センターマーカーと表示中心位置を変える）
《この地図のコードサンプル》
1 | <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 ）にする例
《この地図のコードサンプル》
1 | <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> |
- 言語の設定はこちらのページを参考に
スポンサーリンク
スポンサーリンク
おすすめサイト・関連サイト…
スポンサーリンク