googlemap v3　のDTD宣言について

質問・疑問に答えるQ&AサイトOKWave

OKWave

[ 詳しく ]

FAQ（よくある質問）

法人向けサービス

質問する

○○だけど・・・？

解決済みの質問

Check

印刷

<< 前の質問 | 次の質問 >>

googlemap v3　のDTD宣言について

お世話になります。

googleAPI のリファレンスから googlemap v3 のソースを Dreamweavrにコピペしてブラウザで表示できます。
これをDWで「XHTMLに変換」するとまったく表示されません。
どうしたらいいのでしょうか？
1行目のコードが変わるだけなのですが、表示されないのはなぜですか？
他のさくらエディタなどにコピペしても同じ結果です。

サイトはXHTMLで記述しているので統一したいのですが・・・
地図だけをiframeに入れて、という逃げ方もありますが納得できないのです。

ご存知の方がおられましたら教えてください。
よろしくお願いします。

<html>
↓↓↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

投稿日時 - 2011-02-15 12:49:48

連想キーワード：

通報する

QNo.6524460

nikita16

すぐに回答ほしいです

ブックマーク

質問者が選んだベストアンサー

地図が表示されない原因は、DTD宣言やxhtmlとは関係ないと思います。
御提示のままのコードで、HTML5でも、HTML4にちょこっと直しても表示されません。

表示されない原因は、
<div id="map_canvas" style="width:100%; height:100%"></div>
だけで、地図表示サイズの幅と縦を決められないからです。

サンプルサイトの様に、head部にCSS定義

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>

を加えてやるか、明示的に
<div id="map_canvas" style="width:800px; height:600px"></div>
のように指定してやれば、表示されます。