Quelltext der Seite Catalog mit Google Map Anfahrtskarte

{{AppliesTo
|TLVersion=ab 2.8
|Version=ab 2.9
|Ext1=Catalog bis 2.0.0 beta1
}}
[[Category:Extensions]]
[[Category:Catalog]]

==Catalog GoogleMap Anfahrtskarte einbinden==

Es gibt viele Möglichkeiten, wie man für das [[Catalog|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|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.

<source lang="php">
<!-- 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 -->
</source>

==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:

<source>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=&sensor=false"></script>
</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).