Catalog mit Google Map Anfahrtskarte
Aus Contao Community Documentation
| betrifft | |
|---|---|
| TYPOlight Version | ab 2.8 |
| Contao Version | ab 2.9 |
| Extensions | Catalog bis 2.0.0 beta1 |
Inhaltsverzeichnis
Catalog GoogleMap Anfahrtskarte einbinden
Es gibt viele Möglichkeiten, wie man für das Catalog Modul im Frontend bei den Einträgen eine GoogleMap Anfahrtskarte darstellt. Diese Anleitung beschreibt einen ganz einfachen Weg wie man die GoogleMap einbinden kann.
Koordinatenfelder in den Catalog-Eigenschaften (Backend)
Der erste Schritt ist das Hinzufügen von zwei neuen Feldern für die Eingabe der Koordinaten in den Catalog.
Eigenschaften für das 1. Feld:
- Label: Breitengrad
- Description: GoogleMap-Breitengrad eingeben
- Column name: geocoord_breitengrad
- Type: Text
- Mandatory: anhaken
Eigenschaften für das 2. Feld:
- Label: Längengrad
- Description: GoogleMap-Längengrad eingeben
- Column name: geocoord_laengengrad
- Type: Text
- Mandatory: anhaken
Wie in der Beschreibung angegeben, können die Backend-Nutzer auf der Internetseite http://www.mapcoordinates.net/de einfach die gewünschten Koordinaten herausfinden.
Catalog-Reader anpassen
Nun bearbeitet man im Backend das Template des Catalog-Readers (normalerweise catalog_full.tpl) und ergänzt dort an der gewünschten Stelle diesen Code zur Ausgabe der Anfahrtskarte. Die Größe der Karte, der Zoom-Faktor, etc. sind im Beispiel bereits vorgegeben. Natürlich kann das jeder nach seinen Bedürfnissen anpassen und den Code ergänzen.
<!-- indexer::stop --> <?php // die Variable befuellen $cat_glob_coords = $entry['data']['geocoord_breitengrad']['value'] . "," . $entry['data']['geocoord_laengengrad']['value']; ?> <div class="mod_cat_googlemaps block"> <div class="cat_googlemap block" id="cat_googlemap_1" style="width:590px;height:250px;"> <noscript> <p> <img src="http://maps.google.com/maps/api/staticmap?center=<?php echo $cat_glob_coords; ?>&zoom=13&maptype=roadmap&sensor=false&language=de&size=590x250&markers=<?php echo $cat_glob_coords; ?>" alt="" /> </p> </noscript> </div> <script type="text/javascript"> //<![CDATA[ function gmap1_initialize() { var gmap1_Options = { zoom: 13, center: new google.maps.LatLng(<?php echo $cat_glob_coords; ?>), mapTypeId: google.maps.MapTypeId.ROADMAP, draggable: true, disableDoubleClickZoom: true, scrollwheel: true, streetViewControl: true, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT, position: google.maps.ControlPosition.TOP_RIGHT, mapTypeIds: [ google.maps.MapTypeId.ROADMAP ] }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT, position: google.maps.ControlPosition.TOP_LEFT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } } var gmap1 = new google.maps.Map(document.getElementById("cat_googlemap_1"), gmap1_Options); var gmap1_0_marker = new google.maps.Marker({ position: new google.maps.LatLng(<?php echo $cat_glob_coords; ?>), map: gmap1, zIndex: 1 }); if(window.gmap1_dynmap){ gmap1_dynmap(gmap1); } } window.setTimeout("gmap1_initialize()", 500); //]]> </script> </div> <!-- indexer::continue -->
Aufruf für GoogleMap Anfahrtskarte ins Layout einbinden
Abschließend muss nun im Layout das auf der Catalog-Reader Seite genutzt wird, der Aufruf für GoogleMap eingebunden werden. Bearbeitet dazu das betroffene Layout (bei Layout -> Themes) und fügt in das Feld 'Zusätzliche <head>-Tags' folgendes ein:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=&sensor=false"></script>
Das war's! Wenn man jetzt die Details eines Catalog-Eintrages im Frontend aufruft, müsste man die dazu passende Anfahrtskarte sehen (vorausgesetzt natürlich, man hat im Backend die Koordinatenfelder befüllt).
