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 Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

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