Help us understand the problem. What is going on with this article?

google mapが表示されない

More than 5 years have passed since last update.

事象

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!

akippiko
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした