Google Maps Marker mit SVG Icon

Marker in der Google Maps API mit SVG Icons ausstatten – klingt einfach, beinhaltet aber einige essenzielle Details ohne die es nicht funktioniert. Heute möchte ich dir zeigen, wie ich das Problem für mich lösen konnte.

Für ein Projekt, bei dem ich die Google Maps API brauchte, wollte ich die Icons der Marker individualisieren. Soweit kein Problem, denn in der Dokumentation über die Marker wird dies verständlich erklärt. Doch wenn du die Bild-URL einfach mit einem SVG ersetzt, wird das SVG nicht sauber dargestellt.

Gerade auf dem Smartphone sind SVGs aber viel schärfer als einfache PNGs. Auf Retina-Geräten werden die Pixelgrafiken geradezu „schmutzig“ dargestellt. Für mich führt daher nichts an einem vernünftigen SVG herbei.

Alternative für einfarbige Symbole

Möchtest du einfarbige Symbole einsetzen, kannst du auch die Symbole-Funktion von Google Maps verwenden. Dies ist eine praktische Alternative zu SVGs und führt ebenfalls zu einer absoluten scharfen Darstellung deiner Marker.

Neben dem Pfad für das Icon (komplexe Pfade möglich), kannst du dem Marker bei Bedarf auch noch eine Outline mitgeben. Dein Maps-Symbol definierst du direkt im „icon-Wert“ deines Markers.

Ein einfaches Beispiel aus der Symbole-Dokumentation:

var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
        fillColor: 'yellow',
        fillOpacity: 0.8,
        scale: 1,
        strokeColor: 'gold',
        strokeWeight: 14
    },
    map: map
});

Um eigene Symbole einzufügen musst du dir lediglich die Path-Koordinaten aus deinem SVG kopieren. Sie befinden sich direkt im Path-Tag. Wie du siehst, kannst du so immer nur ein path verwenden.

Echte SVGs verwenden

Möchtest du mehrfarbige Grafiken einbinden, sind die Symbole keine Lösung mehr. Dann brauchst du ein richtiges SVG. Dies kannst du folgendermaßen einbinden:

var marker = new google.maps.Marker({
    position: position,
    icon: {
        url: 'path/to/image.svg', //Pfad zum SVG
        anchor: new google.maps.Point(16, 16), //Mitte des SVGs
        scaledSize: new google.maps.Size(32, 32) //Abmessungen des SVGs
    },
    optimized: false, //Wichtig, damit das SVG richtig dargestellt wird
    map: map
});

Inline-SVG verwenden

Möchtest du dir für das Laden des SVGs einen Request sparen und die Anzahl externer Dateien reduzieren, kannst du dein SVG auch direkt Inline einbinden. Dazu fügst du das SVG einfach base64-encoded im URL-Parameter ein:

var marker = new google.maps.Marker({
    position: position,
    icon: {
        url: 
 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNpcmNsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6Izk5OTk5OTt9PC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1MCIgY3k9IjI3LjUiIHI9IjE3LjkiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzQsODguMUgyNmMtMy43LDAtNi42LTMtNi42LTYuNnYtNi4zYzAtMTIuNywxMC4zLTIzLDIzLTIzaDE1LjNjMTIuNywwLDIzLDEwLjMsMjMsMjN2Ni4zQzgwLjcsODUuMSw3Ny43LDg4LjEsNzQsODguMXoiLz48L3N2Zz4=',
        anchor: new google.maps.Point(16, 16), //Mitte des SVGs
        scaledSize: new google.maps.Size(32, 32) //Abmessungen des SVGs
    },
    optimized: false, //Wichtig!
    map: map
});

Viel Spaß mit knackscharfen Marker-Icons in deiner Google Map!

Schreibe einen Kommentar