サイト内検索
...HTML・XHTMLタグ...
埋め込みタグ
Google マップの埋め込み(object要素)
- Google マップで、表示する場所を探します。
- 地図の右上の所にある「リンク」をクリックして、HTMLコードを修得します。
- このHTMLコードは、「W3C Markup Validation Service」ではValidしません。
- 「小粋空間」にある「変換スクリプト」を使用させていただき
- Valid用のHTMLコードを作成します。
- <--><!-->が、記述漏れと修正されています。
- 記述がないと、IE以外のブラウザでは地図が表示されませんので、
- 忘れないように記述してください。
- 「小粋空間」を参照にさせて頂きました。
- object要素については、こちらをご覧ください。
サンプル
表示する場所によって座標が変わってきます。
(&ll=36.5626,136.362305&spn=30.342429,37.96875の
数字の部分です。)
<iframe width="300" height="300"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875&z=4&output=embed">
</iframe>
<br />
<small>
<a href="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875&z=4&source=embed"
style="color:#0000FF;text-align:left">
大きな地図で見る
</a>
</small>
<![endif]-->
<!--[if !IE]>
<-->
<object width="300" height="300" type="text/html"
data="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875 &z=4&output=embed">
non data
</object>
<br />
<small>
<a href="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875 &z=4&source=embed"
style="color: #0000FF; text-align: left;">
大きな地図で見る
</a>
</small>
<!-->
<![endif]-->
大きな地図で見る
(&ll=36.5626,136.362305&spn=30.342429,37.96875の
数字の部分です。)
- object 要素だけでは、
- 「Internet Explore」で正常に表示されない場合がありますので、
- iframe + objectを指定しています。
《iframe + objectを使って》
[bodyの中]
<!--[if IE]><iframe width="300" height="300"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875&z=4&output=embed">
</iframe>
<br />
<small>
<a href="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875&z=4&source=embed"
style="color:#0000FF;text-align:left">
大きな地図で見る
</a>
</small>
<![endif]-->
<!--[if !IE]>
<-->
<object width="300" height="300" type="text/html"
data="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875 &z=4&output=embed">
non data
</object>
<br />
<small>
<a href="http://maps.google.co.jp/?
ie=UTF8&ll=36.5626,136.362305&spn=
30.342429,37.96875 &z=4&source=embed"
style="color: #0000FF; text-align: left;">
大きな地図で見る
</a>
</small>
<!-->
<![endif]-->
[ブラウザ上]
大きな地図で見る