web-dev-qa-db-ja.com

Googleマップのズームコントロールが台無しです

Google Maps API（v.3）を使用して、いくつかのマーカーで地図を表示します。最近、地図のズームに使用するコントロールが台無しになっていることに気づきました（常にこのようになっているわけではありません）。原因がわからない。

enter image description here

更新

この投稿には元々、問題を表示できるページへのリンクがありましたが、現在リンクが壊れているため、削除しました。

javascriptcssgoogle-maps
173
Dónal

あなたのCSSはそれを台無しにしました。削除する max-width: 100%;の814行目とズームコントロールが再び正常に表示されます。このようなバグを回避するには、CSSでより具体的なセレクターを使用します。

109
Konrad Dzwinel
#myMap_canvas img {
    max-width: none;
}

私のためにそれを修正しましたが、@ Benによる質問へのコメントを指摘したかったです、「この問題は、Bootstrap 「彼は正しい。私はBootstrapを使用していないが、div idを変更した後に問題が発生し始めた。

Map_canvasに戻すと、最大幅の変更なしで修正されました。

<div id="map_canvas"></div>
80
Aligned

Bootstrapを使用している場合は、「google-maps」クラスを指定します。これは私のために働いた。

別の方法として、Googleマップdivのすべてを一種のラストリゾートソリューションとしてリセットすることもできます。

HTML：

<div class="mappins-map"><div>

CSS：

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
21
woens

@ Max-Favilliの回答を共有するだけです：

GoogleマップAPIの最新バージョンでは、これが必要です。

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

@ Max-Favilliに感謝

https://stackoverflow.com/a/19339767/3070027

16
poostchi

Twitter Bootstrapユーザーの場合、次の行をCSSに追加する必要があります。

.gmnoprint img { max-width: none; }
5
Fernando Prieto

私もこの問題を抱えていて、

.google-maps img {
    max-width: none;
}

うまくいきませんでした。私は最終的に使用しました

.google-maps img {
    max-width: none !important;
}

そしてそれは魅力のように働いた。

4
Dylan Becks

YahooのPure CSSを使用している場合、divにBootstrapのような「google-maps」クラスを指定し、このルールをCSSに追加します。

.google-maps img {
    max-width: none;
    max-height: none;
}

私が知る限り、Pure CSSにはこの問題を単独で修正する方法はありません。

2
dmzza

上記のすべてのソリューションを試してみましたが、他のフォーラムの他のソリューションは役に立ちませんでした。コードが完璧に機能するWordpress以外のサイトがもう1つあるので、本当に面倒です。 （WordpressページにGoogleマップを表示しようとしていましたが、ズームとストリートビューのコントロールがゆがんでいました）。

私がした解決策は、新しいhtmlファイルを作成することでした（すべてのコードをコピーしてメモ帳に貼り付け、xyz.htmlという名前を付け、「すべてのファイル」タイプとして保存します）。次に、Webサイトにアップロード/ ftpし、新しいWordpress=ページを設定し、埋め込み関数を使用します。ページを編集するときは、ビジュアルエディタではなくテキストエディタに移動し、コピー/入力します：

http：// page URL width = "900" height = "950">

ディメンションを変更する場合、上記の両方の引数で変更することを忘れないでください。変更すると、奇妙な結果が得られます。

そこに行きます-他の答えほど賢くないかもしれませんが、私にとってはうまくいきました！ここでの証拠： http://a-bc.co.uk/latitude-longitude-Finder/

0
Glyn

皆さんが私に言ったこれらのオプションは、私のウェブサイトでは機能しませんでした。

Bootstrap V3を使用し、機能に焦点を合わせました。主な理由は、マップに異なるIDを与え、CSSファイルが黄色のstreetvieuw guyでズームバーを表示するために使用したことです。

Map_canvasの名前をmapholderに変更したところ、うまくいきました！とにかく、CSSファイルを調べる必要があるというヒントをありがとう！

0
Impiriumjbb