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サイトで使用する」
「国土地理院の地図をブログやWEBサイトで使用する」
スポンサーリンク
関連記事
公開日:2015年02月03日 最終更新日:2018年03月21日
記事NO:00182