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 要素に半角空白を付与
４．関連・参考
- dtree のサブカテゴリーリストにブログ記事タイトルを表示する for Movable Type
- Movable Type 4.1/MTOS のネイティブタグで dTree を実装する
- コメント投稿フォームの「情報を保存する」のチェックを外した時の振る舞いを変更する
- Parallax Backgrounds で背景画像のスクロール速度を変える
- Lightbox JS/Litebox で BlogPet を背景画像の下に隠す
- 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編）
≫ 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タグの記述で、ブログに張り付けが可能になりました... [続きを読む]
