GoogleMapの埋め込み

GoogleMapの埋め込みは非常に簡単です。ただし、HTML5で使う場合は少しコードの手直しが必要となります。

まず、GoogleMapへ行って、表示させたい場所を検索します。そしたらクリップのマークを押すと下記の画面がでますので、iframeタグごとサイトの目的の場所に埋め込むだけです。

XHTMLやHTML4.01を使用したサイトであれば問題ないのですが、HTML5ではiframe要素のframeborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性が廃止されている（といってもまだ使えるが非推奨の意味）ため使用することができません。

貼り付けコードの中の非推奨部分を削ります。ただし、scrolling属性を削るとレイアウトが崩れるので非推奨であってもこの記述だけは残します。

frameborderを削除して出現した枠線を消すには、iframeに対してborder:noneを指定する。（iframeにclassを追加してそのクラスに対して指定してもよい）

/* CSS */
iframe {
	border:none;
	}

以下例

余談ですが、YouTubeの埋め込みコードの生成は画面を右クリックか、共有からできますが、

これもframeborderが入っているので、GoogleMapと同じような処理をする必要があります。

以下例

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>