Catalog mit Google Map Anfahrtskarte - Versionsgeschichte

Manitougs: Anpassungen

2011-04-09T21:36:16Z

Anpassungen

Nina: /* Aufruf für GoogleMap Anfahrtskarte ins Layout einbinden */

2011-04-09T17:37:13Z

‎Aufruf für GoogleMap Anfahrtskarte ins Layout einbinden

Nina: 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…“

2011-04-09T17:34:03Z

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…“

Neue Seite

{{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">


<?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>


</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 lang="html">
<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).

@@ Zeile 4: / Zeile 4: @@
 |Ext1=Catalog bis 2.0.0 beta1
 }}
 [[Category:Catalog]]
@@ Zeile 33: / Zeile 32: @@
 [[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">
@@ Zeile 114: / Zeile 113: @@
 </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).

@@ Zeile 110: / Zeile 110: @@
 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>
 </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).