エントリー本文
Google マップの貼り付け用 HTML を valid にする
Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。
１．埋め込み HTML の利用方法
埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします（スクリーンショット右上）。
リンクをクリックすると、HTMLコードがすぐ下に表示されます（下）ので、
「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、
<iframe width="425" height="350" ～のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。
２．問題点
埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHTML1.1 では廃止されていることと、以下に示す問題のため、この HTML をブログに埋め込むと not Valid になる可能性があります。
- & が実体参照（&）されていない
- br 要素の"/"の前に空白がない
３．変換スクリプト
ということで、埋め込み用 HTML を valid にするスクリプトを作成してみました。
上のテキストエリアに Google マップ埋め込み用 HTML を貼り付けて、 object または iframe + object のボタンをクリックすると下のテキストエリアに valid な HTML が表示されますので、それをブログ等に貼り付けてください。
object 要素だけではどうもクロスブラウザにならないようです（IE で正常に表示されない等）ので、現状では iframe + object（条件付きコメント利用）を推奨します。
Windows XP + IE6/IE7/FireFox2/Opera9/Safari3で動作確認し、Markup Validation Service で valid になることを確認していますが、不具合等ございましたらご連絡ください。
参考までに、このスクリプトでは下記の変換を行っています。
- iframe 要素を object 要素に変更
- src 属性を data 属性に変更
- object 要素で不要な属性（frameborder/scrolling/marginheight/marginwidth）を削除
- object 要素に type="text/html" を追加
- object 要素の「要素の内容」に「non data」を挿入
& を & に置換（object要素内のみ）br 要素に半角空白を付与
４．関連・参考
2008.09.29 Google の出力コードが変更されていたので、ツールを修正しました（frameborder/scrolling/marginheight/marginwidthが削除されない不具合の対処、&の変換削除など）。 2009.02.07 IEでGoogle マップ以降が表示されなくなる不具合を修正しました。- jQuery ベースのドロップダウンメニュー「Superfish」
- Accordion で特定のメニューをデフォルト表示する
- 「JavaScript で文字をトリミングする（改善版）」バージョンアップ
- dtree のサブカテゴリーリストにブログ記事タイトルを表示する for Movable Type
- Parallax Backgrounds で背景画像のスクロール速度を変える
- prototype.js と pngfix.js の競合を解消する
- JavaScript の for 文のパフォーマンスを改善する
- Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する
- ツリー表示 JavaScript 「dTree」詳解
- dTree によるサブカテゴリーリスト for Movable Type
- HighSlide JS と prototype.js の競合を解消する
- HighSlide JS の onclick 属性を JavaScript で登録する
- Slider によるフォントサイズ変更でアクセシビリティを向上させる
- コメント投稿時にフォームボタンをグレーアウトする for Movable Type
- Slider の利用方法
- Highslide JS でサムネイル画像を拡大表示する
- JavaScript で文字をトリミングする（改善版）
- JavaScript で文字をトリミングする
- BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）
- ドラッグ＆ドロップできるサイドメニューの折りたたみ（その2：ブログへの適用）
≫ Googleマップの埋め込みHTML提供開始 from OKANO WEB Cstomize
「Windows Live Writer」などでMSの地図の貼り付けもできました... [続きを読む]
≫ Google mapが簡単に貼り付けられるようになりました。 from 4GALAXYのメモ
HTMLのタグをコピーペーストするだけでGoogleマップを使用出来るようになりました。
サンプル
拡大地図を表示
貼り付け方法
Google マップへア... [続きを読む]
≫ Google Mapをブログに貼る その2 from いっとくの戯言書庫
昨日エントリーした、Google Mapをブログに貼る件。なにやらhtmlの内... [続きを読む]
≫ GoogleMap埋め込みをvalidに行いたいの巻 from エクステリア明日香：スタッフルーム
昨日ご紹介した、GoogleMapの埋め込み。やはりあちこちで話題になっているよ [続きを読む]
≫ GoogleマップがHTMLのコピー&ペーストで貼り付け可能に from ウェブのあれこれ格納庫
Google マップが HTML を貼り付けるだけで自サイト内に表示できるよう... [続きを読む]
≫ Googleマップの貼り付け方 from 美術看板 有限会社すみよし工芸社
Googleマップの地図自体をブログに貼付けるのは、私の知識では問題が有り全然無理で、しかたなく諦めていました。しかし最近になって、Google マップの... [続きを読む]
≫ Googleマップの貼り付け方 from 美術看板 有限会社すみよし工芸社
Googleマップがブログやホームページに簡単に貼付けが出来るようになりました... [続きを読む]
≫ Google Map貼り付け用タグ生成ツール from blog@ongmap.com
大げさなタイトルですが、ちょっと便利なツールを追加してみました。
POP*POPの
遂にGoogle MapsがYouTubeぐらい簡単に貼り付け可能に！... [続きを読む]
≫ Google Mapに新機能が追加 from 栃木事務機 栃木県 ホームページ制作 WEBコンサルティング 福島県
Google マップがHTMLタグの記述で、ブログに張り付けが可能になりました... [続きを読む]
≫ Google マップの貼り付け用 HTML を valid にする from 技術ブログ
Google マップが簡単に貼り付けできるようになりました。 大きな地図で見る... [続きを読む]
IEで、Google マップ 以降がレンダリングされない場合があります。わたしの場合サイドバーがあるのに表示されていません。
4.23のデフォルトテンプレートです。
＞しきだ博紀さん
こんにちは。
ご質問の件ですが、スクリプトを修正しましたので、再度お試し頂けますでしょうか。
ご指摘ありがとうございました！
: February 7, 2009 5:09 PMIE6、IE7で確認したところ、レンダリングされていました。早速の対応ありがとうございました。
＞しきだ博紀さん
こんにちは。
ご連絡ありがとうございました。
ではでは！
: February 9, 2009 1:33 PMすみません、修正していただいたコードではIE以外で表示できませんでした。
IE以外向けの記述
と修正し表示させています。
すみません、修正していただいたコードではIE以外で表示できませんでした。
<!--[if IE]>
IE向けの記述
<![endif]-->
<!--[if !IE]> <-->
IE以外向けの記述
<!--> <![endif]-->
と修正し表示させています。
＞しきだ博紀さん
こんばんは。
ご指摘ありがとうございました。
また、修正誤り、申し訳ありません。
スクリプトは別途修正したいと思います。
ではでは。
: February 16, 2009 1:30 AM
