Contao Google Maps mit mehreren Marken

Vorab. Für den Anwender, der in Contao nur an der Oberfläche kratzt und noch die Templates von Erweiterungen angepasst hat, kommt jetzt was Neues. Für alle anderen ist es Alltag und benötigt wenig Aufwand.
Die Zusammenfassung: 

1. Im Backend eine neue Karte anlegen und den ersten Marker wie gewohnt setzen. 
2. Neues Template anlegen: z.B: maps_add_markers.html
3. Javascript Code einfügen/anpassen
4. Neues Modul anlegen, welches das Template (siehe 2.) lädt
5. An die gewünschte Stelle im Artikel die Karte (siehe 1.) als Inhaltselement einfügen
6. Diekt darunter das Modul (siehe 4.) als Inhaltslement einfügen
fertig.

Anmerkungen: Für den Javascript Code benötigt man die ID der Karte. Diese kann man kurz über den Quelltext auslesen. Die ID wird mit: 'dlh_googlemap_X' angegeben. Wir benötigen nur die Zahl am Ende!

Javascript Code:
<script>
function gmapX_dynmap(gmapX) {
  var gmapX_1_marker = new google.maps.Marker({
position: new google.maps.LatLng(*Geo-Koordinaten*),
map: gmapX, title:"title",
icon: new google.maps.MarkerImage('files/icon.png',
new google.maps.Size(20, 20),
new google.maps.Point(0,0),
new google.maps.Point(20,0) )
});
var gmapX_1_infowindow = new google.maps.InfoWindow({
content: 'Inhalt der info-Blase'
});
google.maps.event.addListener(gmapX_1_marker, 'click', function() { gmapX_1_infowindow.open(gmapX,gmapX_1_marker);
}); 
}
</script>

Zurück

Einen Kommentar schreiben