Google Maps API – eigenen Marker individuell stylen

Es macht oftmals Sinn den Google Maps Marker individuell zu gestalten, gerade dann, wenn man vielleicht das Logo eines Unternehmens branden will und dies anstelle des Markers anzeigen möchte.

Den Google Maps Marker individuell gestalten – So geht’s

Zunächst einmal benötigt Ihr ein passendes Bild. 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 Icons

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:

  • 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

oliver

Hinterlasse doch 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.

Hinterlasse ein Kommentar zum Beitrag "Google Maps API – eigenen Marker individuell stylen"

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