Sprawdzone metody

Sprawdzone metody dotyczące JavaScriptu

Interfejs Maps JavaScript API działa tylko w standardowym środowisku ECMAScript i W3C DOM. Oznacza to, że modyfikowanie lub zastępowanie działania wbudowanych klas i obiektów udostępnianych przez przeglądarkę może spowodować, że interfejs Maps JavaScript API przestanie działać. Czasami inne biblioteki mogą powodować konflikty z interfejsem Maps JavaScript API, zmieniając działanie przeglądarki tak, że nie jest już ona standardowym środowiskiem ECMAScript. Interfejs Maps JavaScript API nie jest zgodny z tymi bibliotekami.

Biblioteki, które są niezgodne z interfejsem Maps JavaScript API:

  • Prototype: zastępuje Array.from() i Element.prototype.remove() w niestandardowy sposób.
  • MooTools (starsze wersje): zastępuje Array.from() w niestandardowy sposób.
  • DateJS (starsze wersje): zastępuje Date.now() w niestandardowy sposób.

Czasami można zmodyfikować niezgodne biblioteki, aby usunąć niestandardowe zastąpienia.

Sprawdzone metody dotyczące CSS

Gdy dodajesz lub dostosowujesz mapę za pomocą interfejsu Maps JavaScript API, niektóre style stosowane do strony mogą zastępować style mapy i powodować konflikty CSS. Jeśli do stylizowania używasz platformy CSS lub komponentu JavaScript, może to powodować dodatkowe konflikty CSS ze stylami mapy.

Platformy CSS i komponenty JavaScript do stylizowania często używają resetowania CSS lub normalizatora, aby obsługiwać różnice w renderowaniu między przeglądarkami. Platformy często używają elementu box-sizing do skalowania marginesów i obramowań elementów strony. Zwykle wiąże się to ze zmianą domyślnego działania przeglądarki z używania content-box na border-box.

Ten typ resetowania CSS może powodować konflikty CSS z interfejsem Maps JavaScript API, ponieważ interfejs API nie obsługuje zmian w arkuszu stylów agenta użytkownika. Dodatkowe konflikty CSS mogą wystąpić, jeśli platforma lub komponent odwołuje się do klas CSS lub elementów DOM interfejsu Maps JavaScript API.

Aby uniknąć tych konfliktów, zalecamy wzięcie pod uwagę kilku kwestii.

Zgodność ze specyfikacją

Osadzone i połączone style CSS są stosowane do mapy przed stylami Map Google. Jeśli wszystkie style strony są zdefiniowane w osadzonym lub połączonym CSS, postępuj zgodnie z regułami zgodności ze specyfikacją aby mieć pewność, że do mapy są stosowane prawidłowe style.

Typowe elementy CSS, takie jak img, button, i a, mogą zostać zastąpione przez style strony. Jednym z najczęstszych scenariuszy jest sytuacja, gdy atrybut max-width elementu img jest ustawiony na 100 procent. Może to powodować zniekształcenie lub ukrycie komponentów mapy, zwłaszcza jeśli używasz InfoWindow.

Aby rozwiązać ten problem, możesz zaktualizować element img mapy, tak aby atrybut max-width był ustawiony na none. Na przykład:

#map img
{
    max-width : none;
}

Nazwy zajęć

Nie odwołuj się do nazw klas ani wewnętrznych elementów DOM interfejsu JavaScript Maps API. Nie jest to obsługiwane i może spowodować nieoczekiwane zmiany w witrynie. Zamiast tego zalecamy utworzenie własnych klas CSS jako kontenerów mapy.

Jeśli platforma CSS lub komponent JavaScript używa tego typu odwołań, obejściem może być nasze zalecenie dotyczące zastępowania box-sizing.

Zastępowanie box-sizing w CSS

Zastępowanie box-sizing w CSS może być obejściem problemów z stylizowaniem map. Może to być szczególnie przydatne, jeśli używasz platformy CSS lub komponentu JavaScript do stylizowania. Jeśli na przykład box-sizing jest ustawiony na border-box, spróbuj wykonać te czynności:

  • Utwórz zastąpienie box-sizing, które ustawi element <html> na border-box.
  • Użyj box-sizing: inherit w przypadku wszystkich elementów innych niż mapa.
  • Utwórz niestandardowy kontener mapy, który resetuje element box-sizing do initial.

Przykład CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}