TOP > カテゴリ > インターネット・ブログ >

Googleマップを埋め込む

何かと便利なGoogleマップをWEBサイトやブログに埋め込む方法です。ここではGoogle Maps APIを使用せずに簡単に地図を埋め込む方法をご紹介します。

埋め込み方法

基本的にHTMLのiframeタグのsrcに住所を設定するだけとなります。

<iframe src="https://maps.google.co.jp/maps?q=住所"></iframe>

iframeのオプション

iframeタグのオプションを下記の表にまとめました。

オプション 内容 備考
src 埋め込むマップの情報 src="https://maps.google.co.jp/maps?q=住所"など
width 埋め込むマップの横幅 width="100%" や width="250"など
height 埋め込むマップの縦幅 height="250"など
frameborder フレームの境界線 frameborder="0"が望ましい
marginwidth フレームの左右のマージン marginwidth="0"が望ましい
marginheight フレームの上下のマージン marginheight="0"が望ましい

srcのオプション

iframeタグのsrcのオプションを下記の表にまとめました。

オプション 内容 備考
q 住所 住所はURIエンコードした方が良い
z 地図のゼットオーダー(縮尺) 0-23 値が小さいと最小(デフォルトは14)
iwloc 情報ウインドウ(吹き出し) A:情報ウインドウ表示 J:マーカーの表示 B:非表示
t 表示モード m:地図 k:航空写真 h:地図+航空写真 p:地形図
output 出力 output=embed

サンプル

六本木ヒルズ 東京都港区六本木6−10−1

[HTMLコード]

<iframe width="100%" height="250" frameborder="0" marginwidth="0" marginheight="0" src="https://maps.google.co.jp/maps?q=東京都港区六本木6−10−1&output=embed&t=m"></iframe>

ライセンスについて

Googleマップの利用は基本的に無料ですが、1日当たりに25,000件を超えると使用料金を支払う必要が出てきます。ライセンスの詳細に関してはよくある質問Google Maps API のライセンスを参考にするとよいと思います。

国土地理院の地図を使用する方法もあります。
「国土地理院の地図をブログやWEBサイトで使用する」





関連記事



公開日:2015年02月03日 最終更新日:2018年03月21日
記事NO:00182