HOME > > > GoogleMap APIで<div>で囲むとGoogleMapが表示されないのは<!DOCTYPE html>が原因?

GoogleMap APIで<div>で囲むとGoogleMapが表示されないのは<!DOCTYPE html>が原因?

googlemap

GoogleMap APIを<div>で囲むとマップが表示されない

GoogleMapが表示されなくて困りました。
GoogleMap APIを使ってマップを表示しようと思ったのですが、あれ?表示されない?なんで?という現象が起こりました。ソースをマップだけ表示する様に限りなくシンプルにすると表示する。通常のWebに入れ込むと表示されない。うわぁ~、こんな所で・・・と詰まってしまったのですが、下記の様にすると表示されました。

<!DOCTYPE html>を削除すると表示された

<!DOCTYPE html>を削除するとマップが表示されました。
でもこれってHTML5の宣言なので消したくないですよね。

原因はwidthとheightの100%でした

widthをブラウザいっぱいに広げようとしていて「width:100%;」にしていたのが原因でした。
%だけの設定だと表示されない様なので、widthかheightにpx等の設定をすると表示されます。
こっちの原因なら問題なくクリアできそうです。

CSS

表示されなかった時のCSS。

ちなみにwidth:100%;だけでも表示されませんでした。

#map_canvas{
 width: 100%;
 height: 100%;
}

表示された時のCSS

#map_canvas{
 width: 100%;
 height: 350px;
}

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket