Googleマップのズームコントロールがめちゃくちゃになっている

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

更新

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

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

#myMap_canvas img {
    max-width: none;
}

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

これをmap_canvasに戻すと、最大幅を変更せずに修正されました。

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

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;
}

@ 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

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

.gmnoprint img { max-width: none; } 

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

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

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

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

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

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

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

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

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

私はBootstrap V3を使用しており、機能性に重点を置いています。主な理由は、マップに別のIDを割り当てたため、CSSファイルで黄色のstreetvieuw男がズームバーを表示したためです。

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

私は上記の解決策をすべて試しましたが、他のフォーラムの他の解決策も役に立ちませんでした。コードが完全に機能する別のWordpress以外のサイトがあるので、それは本当に迷惑でした。（GoogleマップをWordpressページに表示しようとしましたが、ズームとストリートビューのコントロールが歪んでいました）。

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

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

寸法を変更する場合は、上記の両方の引数で変更することを忘れないでください。変更しないと、奇妙な結果になります。

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