[解決済み] Google Maps API V3 : 奇妙なUI表示の不具合 (スクリーンショット付き)
2023-08-07 12:48:10
質問
Google マップの UI コンポーネントでこの奇妙な不具合を引き起こしている原因について何かお心当たりのある方は、ぜひご連絡ください!
でマップが作成されます。
var options = {
zoom: <?php echo $this->zoom ?>,
center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
となり、マーカーがない状態でも不具合は同じです。
解決方法は?
同じような問題にぶつかりました。 cssデザイナーはこのスタイルを使っていました。
スタイル.css
img {max-width: 100%; }
ズームコントロールを無効にする代わりに、map_canvas 要素の img スタイルを次のようにオーバーライドすることで問題を解決しました。
style.css を使用します。
#map_canvas img { max-width: none; }
ズームコントロールが正しく表示されるようになりました。
img max-width:100%" を設定することは、ブラウザのサイズを変更したときに画像が比例してリサイズされるように、レスポンシブ/フルイド Web サイト デザインで採用されるテクニックです。いくつかのCSSグリッドシステムは、デフォルトでこのスタイルを設定するようになったようです。 フルードイメージの詳細については、こちらをご覧ください。 http://www.alistapart.com/articles/fluid-images/ なぜこれがグーグルマップと衝突するのかよく分かりませんが...。
関連
-
[解決済み] Googleマップのtransit_stationにはバスステーションも表示される
-
[解決済み] Google Maps JS API v3 - シンプルな複数マーカーの例
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] Google Mapsのマーカーの色を変更するにはどうしたらいいですか?
-
[解決済み] Google Mapsに影響を与えるTwitter BootstrapのCSS
-
[解決済み] GISサービスにおける緯度・経度タプルの記述順の優先度について
-
[解決済み] Google Maps API - 住所の座標を取得する
-
[解決済み] Google Maps V3: ストリートビューを無効にする方法は?
-
[解決済み] Google Maps Api v3 - 最寄りのマーカーを探す
-
[解決済み] クリックでGoogleマップにマーカーを追加
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ReferenceError: google is not defined
-
[解決済み] Googleマップのtransit_stationにはバスステーションも表示される
-
[解決済み] Googleマップのズームコントロールがめちゃくちゃになる
-
[解決済み] GISサービスにおける緯度・経度タプルの記述順の優先度について
-
[解決済み] Google Maps API - 住所の座標を取得する
-
[解決済み] Google Map API V3: マーカーにカスタムデータを追加する方法
-
[解決済み] Google Maps API Key を保護するためにどのような手順を取ればよいですか?
-
[解決済み] Google Maps Api v3 - 最寄りのマーカーを探す
-
[解決済み] google プレイス ライブラリ 地図なし
-
[解決済み] Google Maps Android API v2を使って2点間のパスを描画する