web-dev-qa-db-ja.com

Googleマップ（3.14）情報ウィンドウでCSSスタイルを無効にする

Googleマップバージョン3.14には、カスタム情報ウィンドウに追加された新しいcssルールがあります。私はinfoboxプラグインを使用していますが、今では多くの要素スタイルが上書きされています。

例えば：

.gm-style div,.gm-style span,.gm-style label,.gm-style a {
    font-family: Roboto,Arial,sans-serif; 
    font-size:11px;
    font-weight:400
}

.gm-style div,.gm-style span,.gm-style label {
    text-decoration:none
}

.gm-style a,.gm-style label {
    display:inline
}

.gm-style div {
    display:block
}

.gm-style img {
    border: 0; 
    padding: 0;
    margin: 0
}

「！important」を使用してこのグーグルスタイルを上書きする必要があることを除いて、それを変更する方法はありますか？

編集：

フォント「Roboto」もロードされます。パフォーマンスに関心があるなら、それは本当に素晴らしいことではありません。

EDIT2：

わかりました、！importantは必要ありません。 Googleのスタイルを上書きすることも、CSSセレクターの特異性を高めることで可能です。しかし、これは私がすべてのグーグルスタイルを上書きしなければならないことを変えません。また、robotoフォントもロードされます。

javascriptcssgoogle-maps
28
Philipp Kühn

私が見ることができることから、新しいCSSルールはすべてのマーカー、コントロール、情報ウィンドウのウェブ全体のスタイリングを破ることが保証されているので、公式リリースの一部になるほど十分に長い間3.expバージョンに留まらないでしょう。それまでの間、このような重大な変更から自分を守るために。おそらく2つのことを行う必要があります。

1マップAPIへのリンクにバージョンを設定します。何かのようなもの

<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>

マップAPIの現在のリリースバージョンに常にアクセスしていることを確認します。もっと保守的になりたい場合は、メジャーリリースとマイナーリリースも指定できます。メジャーバージョンとマイナーバージョンを指定した場合、通常のリリーススケジュールの一部として、maps APIの更新をテストできます。ラップされたモバイルアプリケーションの一部としてマップAPIにアクセスしている場合、ユーザーがアプリを更新するタイミングを制御できないため、おそらくv = 3を設定してからマップCSSの変更からアプリを隔離することをお勧めします（以下の2.を参照）

2マーカー、コントロール、または情報ウィンドウのスタイルを設定して、スタイルをより適切に制御します。たとえば、次のようなHTMLのマーカーがある場合

<div class="my-marker">...</div>

次のようなcssルールにより、maps APIがフォントサイズを設定しないようにすることができます。

div.my-marker {
  font-size: 18px;
  ...
}

次のようなマップAPIスタイルが与えられていることに注意してください

.gm-style div {
  font-size: 11px;
  ...
}

emのように、要素の絶対サイズ、相対測定値を指定する必要があります。たとえば、font-size：11pxへの潜在的な変更から保護することはできません。

11
marc

私は同じ問題を抱えており、イベントリスナーを追加した後、Emadsの回答はうまく機能しました。

google.maps.event.addListener(map, 'idle', function()
{
    jQuery('.gm-style').removeClass('gm-style');
});

問題は、GoogleがRobotoフォントをロードするのを止める方法がまだ見当たらないことです。

編集：まあ...それを止めるには、かなり簡単な方法があります。 GETを使用して、次のような古いバージョンのgoogle APIをロードします。

<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>

このAPIバージョンでは、Googleはgmスタイルをまったく変更しません。そのため、クラスやスタイルをオーバーライドする必要はありません。

5
dorr Baume
jQuery('.gm-style').removeClass('gm-style');

OR

ファイルでこれを見つける/ wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker"

そしてそれを

<span class="overlay-simple-marker"
2
Emad Hajjar

InfoBoxは options のスタイル要素も提供します

var labelOptions = {
  content: label,
  boxStyle: {
  //Insert style here
  },
  .
  .
}
2
Jaykishan

これは、要素がインラインではなくCSSによってスタイル設定されるようになったため、バージョン3.14の重大な変更です。

ラベルおよびUI要素で使用されるデフォルトのフォントが変更されました。 UI要素は、APIによってCSSでスタイル設定されます。つまり、マップ上のDOM要素を対象とするカスタムCSSは、新しいデフォルトのスタイル設定の代わりにこれらを適用したい場合、調整が必要になる場合があります。

詳細については、 視覚的な更新の変更 を参照してください。

Googleマップでは、これはあまり効果的ではありません。子孫セレクター（div子で！）を使用しているためです。これらはまったく効率的ではありません。

これを修正するには、次のような非常に具体的なものが必要です。

与えられたHTML

<div class="gm-style">
 <div class="myClass-parent">
    <div class="myClass">Lorem ipsum dolor</div>
 </div>
</div>

のようなものを試してください

.myClass-parent > div.myClass 
{
  font-weight:600;
}

Div.myClassをスタイリングするだけでは機能しない場合があります。

1
Noel Abrahams

この問題については、このスレッドのgoogleの投稿をご覧ください： https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

1
Gmap4 guy

私も、3.14が導入されてから、追加されたgmスタイルとRobotoフォントの読み込みに苦労しています。

この問題は、Google Maps APIコードベースの「バグ」として報告されています。スターを付けて http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introducedでコメントしてください％20Fixed％20Summary％20Stars％20ApiType％20Internal＆groupby =＆sort =＆id = 6078

1
jpostdesign

Dorr Baumsソリューションに対応して、プロトタイプjsを使用している場合は、次を使用してこのクラスを削除できます。

google.maps.event.addListener(map, 'idle', function() {
        $$('.gm-style').invoke('removeClassName', 'gm-style');
});
0
Aaron Dancygier

以下を実行して、マップ上でこれを修正しました。それが役に立てば幸い

  1. 情報ウィンドウ内に独自のdivを作成し、独自のcssを設定します。

<div class='iw'>infowindow content</div>

  1. 前にcssファイルへのリンクを設定してください！ページヘッドのGoogle API。

  2. Ctrlキーを押しながらブラウザの更新をクリックして、CSSの変更を完全に更新します。 Firefoxを使用していました。

0
Harry

Googleは古いバージョンの動作を変更したため、v1.13をロードすることはできなくなりました。新しいスタイルとroboto-fontは常にロードされます。私の新しい解決策は、すべてのスタイルシートを個別のファイルに保存し、次のスクリプトを含めることです。

google.maps.event.addListener(map, 'idle', function()
{

    $('style').remove();

});

これにより、Google APIによって書き込まれたすべてのスタイルタグが削除され、独自のスタイルが保存されますが、robotoフォントは引き続きロードされます。それを止める方法はありません。

0
dorr Baume