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.

Keine Produkte gefunden.

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.

Keine Produkte gefunden.

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();

Keine Produkte gefunden.

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)); } }

Keine Produkte gefunden.

revilodesign oli

2 Kommentare

Schreibe ein Kommentar zu Google Maps API – Karte mit mehreren Marker und Infowindow

  1. avatar philPhil sagt:

    Hallo Oli
    Danke für den Beitrag Google Maps API – Karte mit mehreren Marker und Infowindow.
    Ich bin totaler Anfänger in Javascript und ich hab zwar deine Quelltexte verstanden. Jedoch mache ich vermutlich etwas falsch, ich habs jedenfalls nicht geschafft, das Beispiel in meiner Website zum funktionieren zu bringen.
    Hilfreich wäre ein Quelltext inkl. dem ganzen HTML-Code.
    Da könnte ich nur meinen API-Key einfügen und es würde funktionieren.
    Gruss, Phil

    499@eag.ch

    • avatar adminadmin sagt:

      Hey Phil,

      ich schaue mal was ich machen kann 😉

      LG Oli

Schreibe einen Kommentar zu admin Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

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

Follow Me

doch mal auf Instagram