【重要】サービス終了のお知らせ

Fork
0
Fav
0
View
2713
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 23 lines
  • HTML 9 lines
  • CSS 5 lines

Bootstrapで作成しているページ内でGoogle Maps JavaScript APIを使うと、地図の表示が乱れる場合があります。

このサンプルでは、IDの異なる2つのdiv要素を地図用の領域として、それぞれに対して同じ処理(地図の表示、クリックイベントハンドラの登録)をしています。

結論としては、IDがmap_canvasだと正常に表示されますが、それ以外では表示が乱れます。

表示が乱れる原因は、BootstrapのCSSの以下にあります。

img {
...
  max-width: 100%;
...
}

そして、#map_canvas対応として特別に以下の指定があるため、#map_canvasでは地図が正常に表示されます。

#map_canvas img {
  max-width: none;
}

地図領域にmap_canvas以外のIDを使用している場合は、上と同様のスタイル指定を自分で書く必要があります。

  • BootstrapのGoogle Maps JavaScript APIへの影響
  • BootstrapのGoogle Maps JavaScript APIへの影響

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ovreneli

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags