Google Maps API – Karte mit mehreren Marker und Infowindow

Im heutigen Beitrag möchte ich Euch zeigen, wie Ihr mehrere Marker mit einem Infowindow in die Google Maps Karte einfügen könnt. Gerade beim erstellen einer Karte mit dem Ziel den Besucher die Standorte von Stores, Filialen oder anderen Unternehmen aufzuzeigen macht dies Sinn. Noch mehr Sinn macht es, wenn man nicht nur die Marker platziert, sondern auch noch sogenannte Infowindows hinzufügt, die sich beim anklicken des Markers öffnen. Somit bietet man den Besucher den bestmöglichen Nutzen der Google Maps Karte.

So erstellst Du eine Google Maps Karte mit mehreren Marker und Infowindow

Im folgenden Beispiel habe ich eine Google Maps Karte mit multiple Marker erstellt, die beliebte Reiseziele in Deutschland von mir zeigen.

Erstellen eines Arrays

Anders als beim Erstellen einer Google Maps Karte mit einem einfachen Marker müssen die Daten beim erstellen mehrerer Marker auf einer Google Maps Karte zunächst in einem array gespeichert werden.

var locations		=	new Array();							
var locations		=	[
	{
		lat		: 	51.0504088, 
		lng		:	13.7372621,
		city	:	'Dresden',
		marker	:	'/images/icon_marker_orange.svg'
	},{
		lat		: 	53.5510846, 
		lng		: 	9.9936819,
		city	: 	'Hamburg',
		marker	:	'/images/icon_marker_blue.svg'
	},{
		lat		: 	53.0792962, 
		lng		: 	8.8016936,
		city	: 	'Bremen',
		marker	:	'/images/icon_marker_turkis.svg'
	},{
		lat		: 	48.1351253, 
		lng		: 	11.5819805,
		city	: 	'München',
		marker	:	'/images/icon_marker_red.svg'
	},{
		lat		: 	58.487952, 
		lng		: 	19.863281,
		city	: 	'Ostsee',
		marker	:	'/images/icon_marker_green.svg'
	},{
		lat		: 	51.75, 
		lng		: 	10.633333,
		city	: 	'Harz',
		marker	:	'/images/icon_marker_purple.svg'
	}
];

Infowindow definieren

Vorab müssen wir noch das Infowindow definieren, ansonsten würden wir bei einem Klick auf einen der Marker die folgende Fehlermeldung in der Konsole erhalten: infowindow is not defined.

var infowindow		=	new google.maps.InfoWindow();

Array auslesen

Im nächsten Schritt nutzen wir die for-Schleife um die multiplen Marker auf die Google Maps hinzuzufügen. Dazu zählen wir so lange hoch, bis i größer als die Array-Länge der Variablen locations ist.

Um die Marker besser auseinander zu halten habe ich den Markern unterschiedliche Icons zugewiesen. Wie das geht könnt Ihr in meinem Artikel: Google Maps API – eigenen Marker individuell stylen nachlesen.

for (i = 0; i < locations.length; i++) { 
	marker = new google.maps.Marker({
		position	:	new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
		map			:	map
	});
	
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
		return function() {
			infowindow.setContent('

' + locations[i]['city'] + '

'); infowindow.open(map, marker); } })(marker, i)); }

Google Maps mit mehreren Marker und Infowindow – Beispiel

Wer, so wie ich manchmal auch, einfach nur alles überflogen hat und einen kompletten Code-Schnipsel sucht, für den habe ich alles noch einmal zusammengefasst.

function initMap() {
		
	var myLatLng = {
		lat			:	52.520008,
		lng			:	13.404954
	};
	var mapOptions		=	{
		zoom			:	5,
		mapTypeControl	:	false,
		center			:	myLatLng,
	};
	
	map = new google.maps.Map(document.getElementById('map'), mapOptions);
	
	var locations		=	new Array();							
	var locations		=	[
		{
			lat		: 	51.0504088, 
			lng		:	13.7372621,
			city	:	'Dresden',
			marker	:	'/images/icon_marker_orange.svg'
		},{
			lat		: 	53.5510846, 
			lng		: 	9.9936819,
			city	: 	'Hamburg',
			marker	:	'/images/icon_marker_blue.svg'
		},{
			lat		: 	53.0792962, 
			lng		: 	8.8016936,
			city	: 	'Bremen',
			marker	:	'/images/icon_marker_turkis.svg'
		},{
			lat		: 	48.1351253, 
			lng		: 	11.5819805,
			city	: 	'München',
			marker	:	'/images/icon_marker_red.svg'
		},{
			lat		: 	58.487952, 
			lng		: 	19.863281,
			city	: 	'Ostsee',
			marker	:	'/images/icon_marker_green.svg'
		},{
			lat		: 	51.75, 
			lng		: 	10.633333,
			city	: 	'Harz',
			marker	:	'/images/icon_marker_purple.svg'
		}
	];
	
	var infowindow		=	new google.maps.InfoWindow();
	
	for (i = 0; i < locations.length; i++) { 
		marker = new google.maps.Marker({
			position	:	new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
			map			:	map,
			animation	:	google.maps.Animation.DROP,
			icon		:	new google.maps.MarkerImage( locations[i]['marker'], null, null, null, new google.maps.Size(24, 24) ),
		});
		
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent('

' + locations[i]['city'] + '

'); infowindow.open(map, marker); } })(marker, i)); } }

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.

Letzte Aktualisierung am 12.12.2018 / Affiliate Links / Bilder von der Amazon Product Advertising API