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サイトで使用する」

Pocket
LINE

前の記事：	Facebookのいいねボタンで拡散するOGPの設定方法
次の記事：	ロゴ作成時にフォントを使用すると使用料金が発生する？

公開日：2015年02月03日最終更新日：2018年03月21日

記事NO：00182

プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ

🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬～