Wyłączanie stylów CSS w Google Maps (3.14) Infowindow

Question

W wersji mapy google 3.14 dodano kilka nowych reguł css dla niestandardowego infouindow. Używam wtyczki infobox, a teraz wiele stylów elementów jest nadpisywanych.

Na przykład:

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

Czy istnieje jakiś sposób, aby zmienić tą różnicą, że mam nadpisać to google style via „ważne”?

EDIT:

Czcionka "Roboto" będzie również ładowane. Jeśli zależy Ci na wydajności, to nie jest to naprawdę świetne.

EDIT2:

Ok, ważne nie jest to konieczne. Nadpisywanie stylów Google jest również możliwe dzięki zwiększeniu specyfiki selektorów CSS. Ale to nie zmienia faktu, że muszę nadpisać wszystkie style Google. I załadowana zostanie również czcionka roboto.

Answer 1

jQuery('.gm-style').removeClass('gm-style'); 

LUB

znaleźć to w pliku /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker" 

i zastąpić go

<span class="overlay-simple-marker" 

Answer 2

Miałem ten sam problem i odpowiedź Emads działała dobrze dla mnie po dodaniu detektora zdarzeń .

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

Problem polega na tym, że nadal nie widzę sposobu na zatrzymanie ładowania przez Google czcionki Roboto.

EDYCJA: Cóż ... jest dość łatwy sposób, aby temu zapobiec. Wystarczy użyć GET załadować starszą wersję google API tak:

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

W niemieckiej wersji API, Google nie będzie w ogóle zmienić GM-styl. Nie musisz więc przesłonić żadnych klas ani stylów.

Answer 3

Z tego, co widzę, nowe zasady css gwarantują łamanie stylów dla wszystkich znaczników, kontrolek i okien informacyjnych w całym Internecie, więc może to nie pozostanie w wersji 3.exp wystarczająco długo, aby stać się częścią oficjalnej wersji. W międzyczasie, aby chronić siebie przed łamaniem takich zmian. Powinieneś prawdopodobnie zrobić dwie rzeczy:

1 Ustaw wersję pod linkiem do api mapy. Coś w rodzaju upewni się, że zawsze masz dostęp do aktualnej wersji interfejsu API map. Jeśli chcesz być bardziej konserwatywny, możesz również określić główne i drugorzędne wydania. Jeśli określisz wersję główną i pomocniczą, możesz przetestować aktualizacje interfejsu API map w ramach regularnego harmonogramu wydań.Jeśli korzystasz z interfejsu API map jako części owiniętej aplikacji mobilnej, nie możesz kontrolować kiedy użytkownicy aktualizują twoją aplikację, więc prawdopodobnie zechcesz ustawić v = 3, a następnie spróbować zaizolować swoją aplikację ze zmian w mapach css (patrz 2. poniżej)

2 Oznacz markery, elementy sterujące lub okna informacyjne, aby lepiej kontrolować stylizację. Na przykład, jeśli masz znacznik z HTML jak

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

Można zapobiec API map z ustawiania Ci rozmiar czcionki reguły css jak

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

Uwaga, podane style Maps API jak

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

Będziesz musiał określić bezwzględne rozmiary swoich elementów, względne pomiary, takie jak em nie będą chronić przed potencjalnymi zmianami, na przykład, rozmiar czcionki: 11px;

Answer 4

Jest to przełomowa zmiana w wersji 3.14, ponieważ elementy są teraz stylowane przez CSS, a nie w linii.

Zmieniono domyślne czcionki używane w etykietach i elementach interfejsu użytkownika. Elementy UI są stylizowane za pomocą interfejsu CSS za pomocą interfejsu API, co oznacza, że ​​niestandardowy kod CSS , który jest kierowany na elementy DOM na mapie, może wymagać pewnych korekt, jeśli chcesz zastosować te ustawienia zamiast nowej domyślnej stylizacji.

Aby uzyskać więcej informacji, patrz changes in visual refresh.

To nie jest bardzo dobry ruch na mapach Google, ze względu na użycie selektorów potomnych (na div child!), Które wcale nie są wydajne.

Biorąc HTML

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

Spróbuj czegoś podobnego

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

Wystarczy Styling div.myClass może nie działać:

W tym celu trzeba będzie coś zupełnie specyficzny jak następuje naprawić.

Answer 5

Infobox zapewnia również elementu stylu w options

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

Answer 6

W odpowiedzi na Dorr rozwiązania Baums dla tych, używając prototyp js można użyć następujących czynności, aby usunąć tę klasę.

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

Answer 7

Ponieważ Google zmieniło zachowanie starszych wersji, nie będzie już działać, aby załadować wersję 1.13. Nowe style i roboto-font będą zawsze ładowane. Mój nowy rozwiązaniem jest zapisać każdy arkusz stylów w osobnym pliku i zawierać następujące skrypt:

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

    $('style').remove(); 

}); 

To usunie wszelkie style-tag napisany przez google api i utrzymuje swój styl zaoszczędzić ale czcionka Roboto nadal będzie załadowany . Nie widzę sposobu, aby to zatrzymać.

Answer 8

Ja też zmagałem się z dodanymi stylami gm i ładowaniem czcionek Roboto od czasu wprowadzenia 3.14.

Znaleziono ten problem zgłaszany jako "błąd" w bazie kodów Google Maps API. Proszę gwiazda i komentować na 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

Answer 9

Dla tych, po tym numerze, patrz post przez Google w tym wątku: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Answer 10

Naprawiłem to na mojej mapie, wykonując następujące czynności. Mam nadzieję, że pomaga

1. Utwórz mój własny div wewnątrz infowindow i ustaw własne css.

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

2. Ustaw link do pliku css PRZED! aplet google w nagłówku strony.

3. Przytrzymaj Ctrl & kliknij przycisk Odśwież w przeglądarce, aby wymusić pełne odświeżenie, aby załadować wszelkie zmiany CSS. Używałem Firefoksa.