Google Maps API – eigenen Marker individuell stylen

Es macht oft Sinn den Google Maps Marker individuell zu gestalten, gerade dann, wenn man beispielsweise das Logo eines Unternehmens branden will. Mit einem individuellen Google Maps Marker kann man das Logo anstelle des originalen Markers anzeigen möchte.

Keine Produkte gefunden.

Den Google Maps Marker individuell gestalten – So geht’s

Zunächst einmal benötigt Ihr ein passendes Bild oder ein Icon. Am besten eigenen sich hier quadratische Bilder mit transparenten Hintergrund. Ich persönlich empfehle .svg und würde nur auf PNG-Format zurückgreifen, wenn es nicht anders geht. Ich habe in meinem Beispiel folgenden Marker verwendet.

icon pin

Freepik: flaticon.com

Einbinden des individuellen Google Maps Marker

Nun müsst Ihr eigentlich nur noch euren eigenen Google Maps Marker in Euren Code auf der Webseite einbinden.

var marker	=	new google.maps.Marker({
	position	:	myLatLng,
	map			:	map,
	animation	:	google.maps.Animation.DROP,
	icon		:	new google.maps.MarkerImage( '/images/icon_pin.svg', null, null, null, new google.maps.Size(30,30) )
});

Zur Erklärung des Google Maps Marker:

position: Gibt die Position des Markers an (lat/lng)
map: In welcher Map soll der Marker geladen werden
animation: Animation des Markers
icon: Pfad zum Bild und hinten kann die Größe angepasst werden

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Google Maps API – eigenen Marker individuell stylen

Wenn dir der Beitrag Google Maps API – eigenen Marker individuell stylen gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.