Erstellen Sie Google Maps-Marker mit Inline-SVG
Möchten Sie die Redundanz für Marker-Bilder von Google Maps reduzieren? Unser Frontend-Entwickler Robert Katzki hat herausgefunden, wie Sie eine SVG-Datei in die Google Maps API einbetten können.
Für ein Google Maps-basiertes Projekt (die Web-Version der Boschung RWIS-App) mit vielen ähnlichen Markierungen suchte ich nach einer Möglichkeit, die Redundanz für die Marker-Bilder zu reduzieren. Die Marker-Bilder sehen alle gleich aus, unterscheiden sich lediglich durch die Hintergrundfarbe. Es gibt außerdem einen Farbverlauf und einen Schlagschatten. Das wäre ein perfekter Anwendungsfall für ein SVG-Sprite!
Das Problem
Leider erlaubt die Google Maps API nicht die Verwendung eines SVG-Sprite als Marker-Bild. Egal, was Sie versuchen – die <use>-Methode oder die Spezifizierung einer externen Datei wie markers.svg#my-icon – der Marker taucht nicht auf der Karte auf.
Die Lösung
Als ich über „Fun with SVG: Embedding in CSS“ stolperte, weckte ein Artikel über das Einbetten von SVG-Dateien in CSS mein Interesse. Funktioniert das auch mit der Maps-API? Aber ja! Es funktioniert!
new google.maps.Marker({
position: myLatlng,
map: map,
icon: {
anchor: new google.maps.Point(16, 16),
url: 'data:image/svg+xml;utf-8, \
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> \
<path fill="red" stroke="white" stroke-width="1.5" d="M3.5 3.5h25v25h-25z" ></path> \
</svg>'
}
});
Wie Sie sehen, können Sie auch Zeilenumbrüche einfügen, wenn Escape-Sequenzen verwendet werden.
Die API von Google Maps mag allerdings keine Sonderzeichen (besonders nicht #). Es rendert die Markierung überhaupt nicht, wenn sich dieses Zeichen irgendwo in der SVG befindet. Einen Schlagschatten über die URL (#dropshadow) zu definieren funktioniert anfänglich nicht. Der Trick liegt darin, die Methode encodeURIComponent zu verwenden.
Seitdem wir unsere SVG in JavaScript haben, ist die dynamische Konstruktion der Marker einfach. Im nächsten Beispiel ist die Quell-SVG im DOM und wird über JavaScript als Text geladen. Für den Hintergrund habe ich einen Platzhalter verwendet, der durch den tatsächlichen Farbwert ersetzt werden kann. Beachten Sie den Farbverlauf und den Schlagschatten:
Ein Nachteil dieser Lösung ist, dass die Pfade im DOM oder JavaScript vorliegen. Ein einfarbiges SVG-Sprite zu verwenden, wäre meine bevorzugte Lösung. Dennoch halten wir unseren Code DRY und müssen die SVG-Pfade nur einmalig einpflegen.
Der Artikel erschien ursprünglich hier: robert.katzki.de/posts/inline-svg-as-google-maps-marker
Erfahren Sie mehr über die Verwendung der Google Maps API