Catalog mit Google Map Anfahrtskarte: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Die Seite wurde neu angelegt: „{{AppliesTo |TLVersion=ab 2.8 |Version=ab 2.9 |Ext1=Catalog bis 2.0.0 beta1 }} Category:Extensions Category:Catalog ==Catalog GoogleMap Anfahrtskarte ein…“)
 
K (Anpassungen)
 
(Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt)
Zeile 4: Zeile 4:
 
|Ext1=Catalog bis 2.0.0 beta1
 
|Ext1=Catalog bis 2.0.0 beta1
 
}}
 
}}
−
[[Category:Extensions]]
 
 
[[Category:Catalog]]
 
[[Category:Catalog]]
  
Zeile 33: Zeile 32:
 
[[Catalog_Templates_anpassen|Catalog Templates anpassen]]
 
[[Catalog_Templates_anpassen|Catalog Templates 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.
+
Nun [[Templates_bearbeiten|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.
  
 
<source lang="php">
 
<source lang="php">
Zeile 110: Zeile 109:
 
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:
 
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:
  
−
<source lang="html">
+
<source>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=&sensor=false"></script>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=&sensor=false"></script>
 
</source>
 
</source>
  
−
Das war's! Wenn ihr jetzt die Details eines Catalog-Eintrages im Frontend aufruft, müsstet ihr die dazu passende Anfahrtskarte sehen (vorausgesetzt natürlich, ihr habt im Backend die Koordinatenfelder befüllt).
+
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).

Aktuelle Version vom 9. April 2011, 22:36 Uhr

betrifft
TYPOlight Version ab 2.8
Contao Version ab 2.9
Extensions Catalog bis 2.0.0 beta1

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

Catalog Templates 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; ?>&amp;zoom=13&amp;maptype=roadmap&amp;sensor=false&amp;language=de&amp;size=590x250&amp;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).

Von „https://de.contaowiki.org/index.php?title=Catalog_mit_Google_Map_Anfahrtskarte&oldid=3458“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich habe eine Anpassungsgeschichte angepasst.

Leo Feyer
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge