Google マップがAPIを使わなくてもHTMLのコピペで貼り付けられるようになったそうなんですが、その埋め込みコードがこんな感じ‥。
HTMLソースコード<iframe width="425" height="350" frameborder="no" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E5%85%AD%E6%9C%AC%E6%9C%A8%E3%83%92%E3%83%AB%E3%82%BA&ie=UTF8&ll=35.668872,139.733391&spn=0.008002,0.021071&z=14&om=1&output=embed&s=AARTsJoK7f-qyYsyjBSSd_JVp_x3IpAcVA"></iframe><br/><a href="http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E5%85%AD%E6%9C%AC%E6%9C%A8%E3%83%92%E3%83%AB%E3%82%BA&ie=UTF8&ll=35.668872,139.733391&spn=0.008002,0.021071&z=14&om=1&source=embed" style="color:#0000FF;text-align:left;font-size:small">拡大地図を表示</a>XHTML1.1ではiframe要素は廃止されましたし、それでなくとも物理要素まみれです*1 。ということで、これを前回にならって、GreaseMonkey経由でXHTML 1.1に適合するようにしてみたいと思います。
まず、上記のコードをXHTML 1.1に適合させるとこんな感じになります。
HTMLソースコード<p><object data="http://maps.google.com/maps?f=q&geocode=&q=%E5%85%AD%E6%9C%AC%E6%9C%A8%E3%83%92%E3%83%AB%E3%82%BA&ie=UTF8&ll=35.668872,139.733391&spn=0.008002,0.021071&z=14&om=1&output=embed&s=AARTsJoK7f-qyYsyjBSSd_JVp_x3IpAcVA&hl=ja" width="425" height="350" type="text/html"><a href="http://maps.google.com/maps?f=q&geocode=&q=%E5%85%AD%E6%9C%AC%E6%9C%A8%E3%83%92%E3%83%AB%E3%82%BA&ie=UTF8&ll=35.668872,139.733391&spn=0.008002,0.021071&z=14&om=1&output=embed&s=AARTsJoK7f-qyYsyjBSSd_JVp_x3IpAcVA&hl=ja">拡大地図を表示</a></object></p>つまり、iframe要素をobject要素で代替するわけです、また画像が表示できない環境では、リンクだけが表示されるはずです。
が、これはあんまり実用的ではなかったりします。なぜなら、IE6の場合、設置サイトと別のドメインのデータをobject要素で読み込むと、表示されなくなる不具合があるようなんですね*2 。百歩譲って、aタグが表示されればいいのですが、それさえも表示されない始末。
ってことで面倒なのですが、この問題を解決するために、phpで自ドメインを経由してGoogle Mapsを読み込むことで回避しておこうと思います。具体的には、object要素の参照先(data属性)をhttp://mysite.jp/abc/embed.php/http://maps.google.com/?...と言う形にします。
そいで、embed.phpは
PHPソースコード
$url = str_replace("/abc/embed.php/", "", $_SERVER['REQUEST_URI']);
if(ereg("Safari", $_SERVER['HTTP_USER_AGENT'])) {
header("Location: $url");
} else{
echo file_get_contents($url);
}
て感じです。途中のコードは参照先を書き換えているところで、ドメイン以下からembed.php/までを指定してください。embed.phpの設置先がhttp://mysite.jp/abc/embed.phpなら置換文字列は/abc/embed.php/となります。できたら、設置サイトと同じドメインの好きな場所においてください。
で、ようやくGreaseMonkeyです。次のGreaseMonkeyスクリプトを、内容を確認の上、インストールします。
そして、変数 domain を embed.php を設置したURLに変えてください（変更しないと上手く表示されません）
以上で、諸々の設定は終わり。
コードはGoogle Mapsの画面から「このページへのリンク」を踏んで開いたダイアログにある「埋め込み地図のカスタマイズとプレビュー」のリンク先から閲覧できます。
で、以下が実際に貼り付けてみた例です。ここで誰もが「簡単に貼り付けられるための機能なのになんでこんなに面倒くさいのだ」とツッコまれるかと思いますが、その辺はまぁ過渡的措置と言うことで。
ちなみに、私はこれにさらに改造を加えて、こんな感じになるようにして使っています（リキッドレイアウトマップ）
Safariで地図が表示されないようなので、ブラウザがSafariだと思われる場合、Google Mapsの該当ページにリダイレクトするようにしました
暁さんのご指摘の通り、javascriptコード中の&を実体参照にしました。
現在はWordPressスキンの機能に組み込んで使っています
- 後で見るように実装上仕方ない面はあるのですが[戻る]
- b:id:asiamothさんへ。私もこのサンプルの検証+WWW WATCHと言うサイトで伝え聞いたくらいですから広く不具合とされているわけではないようですが、この環境下ではそうした不具合が出ましたと言うことです。[戻る]
- キーワード：
サイト内
サイト外
読者のコメント
5件