google mapが表示されない #GoogleMapsAPI

事象

google maps apiで、地図を表示しようとしたところ、表示されない。

環境

mac OS X Yosemite 10.10.3
firefox 37.0.2

表示されないソースは以下

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GoogleMap</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
    <style>
        #map{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var latlng = new google.maps.LatLng(35.66, 139.69);
        var options = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'), options);

    </script>
</body>
</html>

原因

api公式ドキュメント

引用

ウェブアプリケーション内で実際の DOCTYPE を宣言することをおすすめします。上に示した例では、次のようなシンプルな HTML5 DOCTYPE を使用してアプリケーションを HTML5 として宣言しています:

<!DOCTYPE html>

最新のブラウザは、この DOCTYPE で宣言したコンテンツを「標準モード」でレンダリングするため、各種ブラウザの規格に準拠したアプリケーションにすることができます。また、DOCTYPE は適切にグレードを下げるように設計されているため、これを認識できないブラウザでは単に無視され、その場合コンテンツは「互換モード」で表示されます。

互換モードで機能する CSS が、標準モードではうまく表示されないこともありますので注意してください。たとえば、パーセンテージに基づくサイズは必ず親ブロック要素から派生させる必要がありますが、その祖先にサイズが指定されていないものがあると、子のサイズは 0 x 0 ピクセルと見なされてしまいます。そのため、上の例には次のような <style> 宣言が含まれています:
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
この CSS 宣言により、地図コンテナ <div>（名前は map_canvas）の高さを HTML ボディの 100% にすることが宣言されています。なお、<body> やのパーセンテージも具体的に宣言する必要がありますので注意してください。

解決したソース

公式ドキュメント注意点を参考にcssを調整します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GoogleMap</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
    <style>
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map { height: 100% }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var latlng = new google.maps.LatLng(35.66, 139.69);
        var options = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'), options);

    </script>
</body>
</html>

good luck!