Wie geil ist das denn? Eigene Symbole auf der Google Maps Karte

Es wäre doch schön, wenn man in der Google Maps Karte auf der eigenen Homepage, den Standort oder die eigenen Standorte auch durch eigene Symbole kennzeichnen könnte.
Das geht auch. Und zu allem Überfluß kann man das Icon auch noch verlinken! Dafür braucht ihr zuerst mal einen Google Maps API Key. Den könnt ihr euch hier herunterladen.
Wenn ihr den habt, müsst ihr die Google API in eure Seite einbinden:

<script src="https://maps.googleapis.com/maps/api/js?key=GENERIERTER-API-KEY&callback=los_gehts"></script>

Der erste Parameter der übergeben wird, ist euer generierter Google Schlüssel. Der zweite Parameter gibt an, welche JavaScript-Funktion aufgerufen werden soll, nach dem laden der API. Hier ist darauf zu achten, das eure JavaScript Funktion vor der API geladen wird und schon bekannt ist. Es empfiehlt sich z.B. deshalb auch die Google API erst im Footer der Webseite zu laden, oder zumindest nach der Datei, die die Funktion enthält, die für das Kartenhandling zuständig ist.

Jetzt können wir uns an die Arbeit machen, eben diese Funktion zu erstellen:

var unsere_karte;
function los_gehts() {
	unsere_karte = new google.maps.Map(document.getElementById('unsere_karte'), {
		zoom: 15,
		center: new google.maps.LatLng(49.71443, 7.30776),
		mapTypeId: 'roadmap'
	});
	
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(49.71443, 7.30776),
		icon: 'http://www.mustermann-backrezepte-erlebnis.de/bilder/unser-logo.png',
		title: 'Einer unserer Standorte',
		url: 'http://offenbach.mustermann-backrezepte-erlebnis.de',
		map: unsere_karte


		marker.addListener('click', function() {
			window.location.href = marker.url;
		});
	});
}

Das läuft jetzt so ab:

• Die Google API ruft die gerade gelistete Funktion los_gehts() auf.
• Die Funktion greift sich eure eure Google Maps Karte
• Sie setzt den Marker mit dem gewünschten Bild, ein paar Beschreibungen und in einem zweiten Schritt den Link für unser Symbol.

Habt ihr z.B. mehrere Standorte zu setzen, packt den Abschnitt mit dem Marker einfach in eine Schleife und die gewünschten Daten z.B. in ein JSON Array. Die statischen Daten, die dem Marker übergeben werden, ersetzt ihr durch dynamische Daten aus dem JSON Array.

Fertig ist die Karte!