css
html DOCTYPEとgoogle maps
by kuippa on 4月.04, 2011, under css, 覚書
はまりました。DOCTYPEを宣言すると何故かgoogle mapが表示されなくなる。
w3cの定義とにらめっこしながらmetaとかの順番かなとか、utf-8をmetaタグで書かないのが正式なのかとか、IE7はおまじないをかかないとだめなのかな？とか、mapsはiframeを使うからフレームセットの宣言にしないと動かないのかな？XHTML 1.1とかはだめなのかな？ とか、いろいろやったのだけどどうもうごかない。xhtmlで書きたかったんです。jqueryや自前のjavascriptとかを使ってたので、削って削ってスリムな形にしてもだーめ。
googleさんのページとかにいくと、
<!DOCTYPE html>
とかシンプルなヘッダー宣言で終わってるんですね。
ここまで削った、シンプルなのが動かないんです。
でも、DOCTYPEを削ると動く。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<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(37.42212447125914, 141.03290954589838);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var _map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>
<title>こんにちは</title>
</head>
<body onLoad="initialize();">
<div id="map_canvas" style="width:600px;height:600px;">
</div>
</body>
</html>なんでーーと、本当にいろいろやりました。ファイルの改行コードだとか、.htaccessでとか、apacheでとか、でも、結局ここでした。
<div id=”map_canvas” style=”width:600;height:600;”>
↓
<div id=”map_canvas” style=”width:600px;height:600px;”>
pxが抜けてたみたいです。
pxが抜けてても new google.maps.Mapまではjs上は動くので発見できませんでした。
DOCTYPEを抜かすと動くのはどうしてだかわかりません。
おまけ、IE8用のおまじない
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″/>
ちなみに、なんでgooglemapsかというと、地震の直後から地図をあれこれした情報共有用のWEBアプリをつくってます。↓こんなの。
htmlを覚えたのはhtml2.0から3.0になるぞー！というタイミングでちゃんと本を買って読んだっきりだったので、4.01とかxhtmlとかもなんとなく使ってはいたけどよくわかっていませんでした。いまさらjqueryとかjs版のgooglemapsに手をだしたので、このままちょっと普通の人がやるような一連のことをやってみようと思います。html5.0までいけたらいいなー。
