これから仮想通貨はじめるなら、コインチェック

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

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

Google Maps APIを使う

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


みはらマップ





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

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

そして本題です。画面いっぱいにGoogleマップを表示させたかったら、単純に
[cc lang=”css”] #map {
height: 100%;
}
[/cc] にすればいいじゃん!と思ったら大間違い。いや、大間違いというか、ちょっとたりません。
[cc lang=”css”] html,body {
height: 100%;
}
[/cc] これも追加してあげないとダメなんです。html body divにheight:100%を追加することで、Googleマップを画面いっぱいに表示できるようになります。

追記

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

みはらマップ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です