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.
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
Hey Phil,
ich schaue mal was ich machen kann 😉
LG Oli