［み］画面いっぱいにGoogleマップを表示させる方法

昨日に続いて、新しいサイトでハマったところのメモです。Googleマップを画面いっぱいに表示させる方法です。

Google Maps APIを使う

まず、Googleマップを表示させるには、Google Maps APIを使います。使い方は、ドットインストールのGoogle Maps APIの基礎を見た方が早いです。そして、わかりやすいです。いちおうコードはこんなんです。

HTML

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>みはらマップ</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        var latlng = new google.maps.LatLng(38.2554391, 140.3396014);
        var options = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map'), options);
    </script>
</body>
</html>

まぁ、詳しくはサイトができてからということで。

で、このコードもこのままでは表示されません。JavaScriptに問題があるわけでもありません。これを表示するにはheightを与えてやらないと表示されません。この点については、ドットインストールでも説明されてたと思います。

そして本題です。画面いっぱいにGoogleマップを表示させたかったら、単純に

CSS

#map {
     height: 100%;
}

にすればいいじゃん！と思ったら大間違い。いや、大間違いというか、ちょっとたりません。

CSS

html,body {
     height: 100%;
}

これも追加してあげないとダメなんです。html body divにheight:100%を追加することで、Googleマップを画面いっぱいに表示できるようになります。

追記

肝心の新しいみはら用サイトはこちらです。

参考
みはらマップ

Google Maps APIを使う

追記

コメントを残す コメントをキャンセル

コメントを残す