Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

google mapが表示されない

事象

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!

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
4
Help us understand the problem. What are the problem?