Coding | Google Werkzeuge | Javascript

SVG Icon für Google Maps

chameleon 1522265 1920

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.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.