SVG Icon für Google Maps

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" />).

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.