Google Maps API V3の地図表示にCSSは必須?

Google Maps APIがV3になって、V2まで必要だったAPIキーが必要なくなり、Google Mapsを表示させる手間がだいぶ省けるようになりました。しかし、Google Mapsを表示させるのに、不思議な点があったのでブログに書かせてもらいました。

API V3でGoogle Mapsを表示しようと思って試したのですが、マップが表示されませんでした。下記のようなサイトを参考にしたのにも関わらず....

チュートリアルを参考にJavaScriptも書いていたのですが、全くもって表示されません。(ちなみに、モバイルSafariで検証しています。)

コードを見直してみる

表示されない、ということは、コードが間違っているのだろう、と思いデバッグコンソールやらFirebugで確認してみましたが、特にエラーは見つかりませんでした。ちなみに..

地図の表示用のHTML

<div id="map_canvas"></div>

Google Maps APIの読み込み

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

Geolocationと地図表示のスクリプト

navigator.geolocation.getCurrentPosition(function(position){
 var lat = position.coords.latitude;
 var lng = position.coords.longitude;
 var acc = position.coords.accuracy;
  var myLatlng = new google.maps.LatLng(lat, lng);
  var myOptions = {
    zoom: 17,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

このコードで問題が無いはずなのに、表示されません......orz。

CSSが必要!?

『Google Map JavaScript API V3 チュートリアル』にある表示例のソースコードを見てみると気になるコードを発見しました。それが下記です。

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

CSSです。これを適用すると、なんと表示されました!!

そのCSSの中身は下記のようになっています。

html {
  height: auto;
}

body {
  height: auto;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: auto;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
}

@media print {
  #map_canvas {
    height: 950px;
  }
}

コードだけを見ると、これらすべてを書く必要は無いのではと思いました。実際に試してみると、下記のCSSのみの適用だけで十分でした。

#map_canvas {
  height: auto;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
}

このCSSが必要というような情報は無かったので、なかなか悩まされましたが、同じようなことが起こっているような方は、上記のCSSを適用させてみてください。