Best Practices

Best Practices für JavaScript

Die Maps JavaScript API funktioniert nur mit einer standardmäßigen ECMAScript- und W3C-DOM-Umgebung. Das bedeutet, dass sie möglicherweise nicht mehr funktioniert, wenn das Verhalten der integrierten Klassen und Objekte, die vom Browser bereitgestellt werden, geändert oder überschrieben wird. Wenn das Verhalten des Browsers so verändert wird, dass es sich nicht mehr um eine standardmäßige ECMAScript-Umgebung handelt, kann es zu Konflikten zwischen anderen Bibliotheken und der Maps JavaScript API kommen. Die Maps JavaScript API ist nicht mit diesen Bibliotheken kompatibel.

Bibliotheken, die bekanntermaßen nicht mit der Maps JavaScript API kompatibel sind:

  • Prototype: überschreibt Array.from() und Element.prototype.remove() auf nicht standardmäßige Weise
  • MooTools (ältere Versionen): überschreibt Array.from() auf nicht standardmäßige Weise
  • DateJS (ältere Versionen): überschreibt Date.now() auf nicht standardmäßige Weise

Manchmal ist es möglich, inkompatible Bibliotheken so zu ändern, dass nicht standardmäßige Überschreibungen entfernt werden.

Best Practices für CSS

Wenn Sie mit der Maps JavaScript API eine Karte hinzufügen oder anpassen, können einige der Stile, die Sie auf Ihre Webseite anwenden, Ihre Kartenstile überschreiben und CSS-Konflikte verursachen. Falls Sie für die Gestaltung ein CSS-Framework oder eine JavaScript-Komponente verwenden, können dadurch zusätzliche CSS-Konflikte mit Ihren Kartenstilen entstehen.

Bei CSS-Frameworks und JavaScript-Stilkomponenten wird häufig ein CSS-Reset oder ein Normalizer verwendet, um Unterschiede beim Rendering zwischen Browsern auszugleichen. Bei Frameworks wird oft das Element box-sizing verwendet, um die Rahmen und Ränder von Webseitenelementen zu skalieren. Dazu muss in der Regel das Standardverhalten des Browsers von content-box zu border-box geändert werden.

Diese Art von CSS-Reset kann zu CSS-Konflikten mit der Maps JavaScript API führen, da die API keine Änderungen am User-Agent-Stylesheet unterstützt. Wenn das Framework oder die Komponente auf CSS-Klassen oder DOM-Elemente der Maps JavaScript API verweist, können zusätzliche CSS-Konflikte auftreten.

Um das zu vermeiden, sollten Sie folgende Empfehlungen berücksichtigen.

Spezifität

Eingebettetes und verknüpftes CSS wird vor den Google-Kartenstilen auf Ihre Karte angewendet. Wenn all Ihre Seitenstile in eingebettetem oder verknüpftem CSS definiert sind, halten Sie sich an die Regeln für die Spezifität, damit die richtigen Stile auf Ihre Karte angewendet werden.

Gängige CSS-Elemente wie img, button und a können von den Stilen Ihrer Seite überschrieben werden. Das passiert oft, wenn das Attribut max-width des img-Elements auf „100 %“ gesetzt ist. Das kann dazu führen, dass Kartenkomponenten verzerrt oder gar nicht angezeigt werden, insbesondere wenn Sie InfoWindow verwenden.

Um dieses Problem zu beheben, können Sie das img-Element Ihrer Karte so aktualisieren, dass das Attribut max-width auf none gesetzt ist. Beispiel:

#map img
{
    max-width : none;
}

Klassennamen

Verweisen Sie nicht auf Klassennamen und interne DOM-Elemente der JavaScript Maps API. Dies wird nicht unterstützt und kann zu funktionsgefährdenden Änderungen auf Ihrer Website führen (ohne Benachrichtigung). Stattdessen empfehlen wir, eigene CSS-Klassen als Container für Ihre Karte zu erstellen.

Wenn ein CSS-Framework oder eine JavaScript-Komponente diese Art von Verweisen verwendet, kann unsere Empfehlung zum Überschreiben der Eigenschaft „box-sizing“ als Problemumgehung dienen.

CSS-Eigenschaft „box-sizing“ überschreiben

Mit Überschreibungen der CSS-Eigenschaft „box-sizing“ lassen sich Konflikte mit dem Kartenstil eventuell umgehen. Das kann besonders nützlich sein, wenn Sie ein CSS-Framework oder eine JavaScript-Stilkomponente verwenden. Wenn box-sizing beispielsweise auf border-box gesetzt ist, versuchen Sie Folgendes:

  • Erstellen Sie eine box-sizing-Überschreibung, bei der das <html>-Element auf border-box gesetzt wird.
  • Verwenden Sie box-sizing: inherit für alle Elemente außer Ihrer Karte.
  • Erstellen Sie einen benutzerdefinierten Kartencontainer, mit dem das box-sizing-Element auf initial zurückgesetzt wird.

CSS-Beispiel:

html {
  box-sizing: border-box;
}

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

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