SVG Icon für Google Maps

chameleon 1522265 1920
Bildquelle: Pixabay, afelipeug

Worauf es beim Icon ankommt ist, dass seine Spitze an die Stelle zeigt an der das Dokument beginnt. Die Maße des Dokuments betragen hier 32 Pixel Länge und Breite, die des Icons: 20 Pixel x 32 Pixel. Dann wird sie später an der richtigen Stelle positioniert. In diesem Beispiel habe ich ein SVG-Icon von IcoMoon verwendet, nach oben links verschoben (siehe Abbildung) und sowohl die Maße des Dokuments als auch des Icons verdoppelt. Die mit InkScape gespeicherten SVG-Datei öffnete ich anschließend mit einem Code-Editor und kopierte daraus nur den Wert aus dem Pfad (<path d="m -0.01694917,-32.135593 c -5.52200003,0 -9.99999983,4.478 -9.99999983,10 0,9.999999 9.99999983,22.00000017 9.99999983,22.00000017 0,0 9.99999997,-12.00000117 9.99999997,-22.00000017 0,-5.522 -4.4780002,-10 -9.99999997,-10 z m 0,15.999999 c -3.31400003,0 -6.00000003,-2.686 -6.00000003,-5.999999 0,-3.314 2.686,-6 6.00000003,-6 3.31399997,0 5.99999977,2.686 5.99999977,6 0,3.313999 -2.6859998,5.999999 -5.99999977,5.999999 z" />).

svg map icon eigenschaften
var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: {
        path: 'm -0.01694917,-32.135593 c -5.52200003,0 -9.99999983,4.478 -9.99999983,10 0,9.999999 9.99999983,22.00000017 9.99999983,22.00000017 0,0 9.99999997,-12.00000117 9.99999997,-22.00000017 0,-5.522 -4.4780002,-10 -9.99999997,-10 z m 0,15.999999 c -3.31400003,0 -6.00000003,-2.686 -6.00000003,-5.999999 0,-3.314 2.686,-6 6.00000003,-6 3.31399997,0 5.99999977,2.686 5.99999977,6 0,3.313999 -2.6859998,5.999999 -5.99999977,5.999999 z',
        scale: 1,
        fillColor: '#cc0000',
        fillOpacity: 1,
        strokeWeight: 2,
        strokeColor: '#000000',
        strokeOpacity: 0.5
    }
});

Das Praktische an dieser Form der Markerdefinition ist, dass die Farbgebung dynamisch über Parameter steuerbar ist (wp_localize_script()), wenn die Map beispielsweise über ein Plugin eingebunden wird. So hat man allerdings nicht nur stets die passende Farbe zur Hand, sondern könnte auch die Größe des Markers oder des Schattens variieren.

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable