von Bernd Warken bei Fa. netcos AG
1.2 Eintrag im TypoScript-Template
Dieses Dokument beschreibt die Hintergründe für die Erstellung der TYPO3-Extension netcos_googlemap zur Darstellung von einer oder mehrerer Google-Maps innerhalb TYPO3. Dies ist eine offizielle Extension, sie ist auf typo3.org erhältlich unter http://typo3.org/extensions/repository/view/netcos_googlemap.
Die Werte für Latitude, Longitude, Zoomlevel und Kartentyp lassen sich im Plugin einstellen, so dass auch mehrere Karten dargestellt werden können.
Dieses Dokument gehört zum TYPO3-Projekt über die Extension netcos_googlemap. Die aktuelle Version dieses Dokuments ist 1.3.3 vom 2. April 2008. Der Autor ist Bernd Warken bei Firma netcos AG.
Alle Elemente des Projekts (dieses Dokument und der Quellcode) stehen unter der Lizenz GPL (GNU General Public License) Version 3. Der Originaltext dieser Lizenz ist erhältlich unter http://www.gnu.org/licenses/gpl.html, eine deutsche Übersetzung befindet sich unter http://www.gnu.de/documents/gpl.de.html.
Copyright 2007,2008 Bernd Warken
Wenn man die Google-Map auf einer Domain benutzen will, muss man von Google eine Kennzahl für diese Domain besorgen.
Die Kennzahl wird bei http://google.com/apis/maps erstellt. Man muss dort eine URL für die Domain angeben und die Kennzahl damit erzeugen. Für jeden Domainnamen wird eine eigene Kennzahl mit etwa 80 Zeichen erstellt. Diese Kennzahl sollte man kopieren und sich merken. Wir speichern diese Kennzahl in der TypoScript-Konstanten:
google_map_key = ABQIAAAARokCoxWjWuwH4eEaCOyBkBQuBzwEBiC_X9c-oZXEt-cQgHLphTNVyn |
Die hier notierte Kennzahl ist jedoch nicht vollständig, sie wurde auf Zeilenlänge gekürzt.
Wenn man seine TYPO3-Seite jedoch nur auf localhost ohne Domainnamen fahren möchte, so braucht man keine Kennzahl erstellen zu lassen. Jeder beliebige Wert ist passend für localhost.
Die Werte des HTML-Headers lassen sich in TypoScript durch den Parameter headerData eingeben. Man muss hier ein JavaScript-Programm auf der Google-Website aufrufen. Zwei TypoScript-Befehle sind hierzu notwendig:
page.headerData.900 = TEXT
page.headerData.900.value (
<script src="http://maps.google.com/maps?file=api&v=2&key={$google_map_key}"
type="text/javascript">
</script>
)
|
page bezieht sich hier auf das Objekt, das mit PAGE erzeugt wurde und auf typeNum 0 läuft. Vielleicht heißt es bei Ihnen seite. Der Wert 900 ist willkürlich gewählt. Sie sollten nur darauf achten, dass dieser Wert nicht an einer anderen Stelle ebenfalls von headerData verwendet wird. google_map_key ist die Konstante, die die Kennzahl gespeichert hat.
Der kickstarter ist das Werkzeug von TYPO3 zur Erstellung von Extensions.
Als erstes muss die Extension kickstarter installiert werden. Dadurch entsteht im Menü des Extension Manager der neue Eintrag Neue Extension anlegen, den wir anwählen.
Im entstehenden Formular gibt man zuerst den Namen im Feld Enter extension key: an, in diesem Fall netcos_googlemap. Bestätigung mit dem Button Update....
Im Folgenden wird die Optionsliste KICKSTARTER WIZARD im Formular bearbeitet. Man drückt zuerst das Pluszeichen von General info. Darin erstellt man den Title Netcos googlemap. Als Category wählt man Frontend Plugins. State ist Beta. Für Dependencies gibt man cms an. Author hinzufügen. Den Button Update... betätigen
Als nächstes das Pluszeichen von Setup languages und darin die Sprache German wählen. Bestätigung durch Update.... Die Standardsprache einer Extension ist immer Englisch, die gewählte deutsche Sprache ist eine Zusatzsprache.
Nun das Pluszeichen von Frontend Plugins betätigen. Man gibt title: Netcos googlemap in beiden Sprachen an. Anklicken Add icon to ‘New Content Element’ wizard:. Update.
Als nächstes ergänzen wir die bestehende Tabelle tt_content um die Datensätze, die im Plugin später angegeben werden. Wir wählen das Pluszeichen von Extend existing Tables. Unter Which table wähle Content (tt_content). Nun geben wir die Datensatznamen in NEW FIELD: an.
Zuerst den Field name width mit Field title: Width und Breite, als Field type: String input. Update. In den entstehenden Feldern geben wir Field width und Max characters 4 an. Required nicht ankreuzen.
Auf gleiche Weise wird ein neuer Datensatz erzeugt mit den entsprechenden Werten: height, Height, Höhe, String input, 4.
Ein weiterer Datensatz mit den Werten: latitude, Latitude, Breitengrad (Latitude), String input, 10, 15.
Und: longitude, Longitude, Längengrad (Longitude), String input, 10, 15.
Sowie: zoom, Zoom Level, Zoomlevel, String input, 5, 5.
Letztlich: maptype, Map Type, Kartentyp, String input, 9, 9.
Als nächstes wird das Pluszeichen von Frontend Plugins gedrückt. title: Netcos Google Map und Netcos Google-Map. Anklicken Add icon to ‘New Content Element’ wizard:. Update.
Die Eingabe ist jetzt abgeschlossen. Daher den Feldbutton View result wählen. Dort auf WRITE klicken. Die Extension wird dann auf typo3conf/ext/netcos_googlemap/ abgespeichert.
Die Extension ist jetzt erstellt und könnte auf Install Extensions installiert werden. Im Frontend würde jedoch noch keine Karte angezeigt, da nur ein Standardtext ausgegeben wird, der vom Kickstarter-Wizard erzeugt wurde. Daher muss der Quellcode in den erstellten Dateien angepasst werden.
Sobald eine Datei im Quellcode (in typo3conf/ext/netcos_googlemap/) geändert wird, darf der Kickstarter nicht mehr verwendet werden, da er alle Dateien mit Defaultwerten überschreibt.
Es scheint, als ob im Quellcode die Dateien wizard_form.* in typo3conf/ext/netcos_googlemap/doc/ gelöscht werden können.
Quellcodedateien einer Extension können im Ext Manager geändert werden. Dazu wird der Menüeintrag Install extensions gewählt. Da die erstellte Extension bereits im Verzeichnis typo3conf/ext gespeichert wurde, wird sie hier auch aufgeführt. Wir klicken auf den Namen der Extension. Dadurch entsteht ein neues Menü, in dem wir Edit files wählen. Alle Quellcodedateien der Extension werden nun dargestellt. Wenn man nun auf den Knopf Edit file neben dem Dateinamen klickt, wird ein Editor mit dieser Datei geöffnet, in dem man die Datei ändern kann.
Wir wollen auf flexform umstellen. Die folgenden Dateien werden dazu angepasst: ext_tables.php, locallang_db.xml und pi1/class.tx_mygooglemap_pi1.php; die Datei flexform_ds_pi1.xml wird neu erstellt. Dokumentation zu flexform ist erhältlich unter http://wiki.typo3.org/index.php/Extension_Development%2C_using_Flexforms.
In ext_tables.php sind innerhalb dem Array $tempColumns das Element tx_netcosgooglemap_ zu löschen und tt_content durch flexform_pi1 zu ersetzen. Außerdem sind folgende Zeilen zu ergänzen:
// include flexform for this extension $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform'; // add flexform parameters t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/flexform_ds_pi1.xml'); |
In locallang_db.xml werden nur die Zeilen, die tx_netcosgooglemap_ enthalten, geändert. Dabei wird wieder tx_netcosgooglemap_ gelöscht und tt_content durch flexform_pi1 ersetzt. Die Zeilen mit dem Index tt_content.list_type_pi1 bleiben erhalten. Bei Bedarf kann auch noch der Name für das default sheet, die Überschrift bei der Eingabe, angegeben werden. Dabei wird in beiden Sprachabteilungen die folgende Zeile, evt. mit anderem Inhalt, eingegeben:
<label index="flexform_pi1.sheet_default">Default Sheet</label> |
Die Hauptdatei zur Änderung ist die Datei pi1/class.tx_netcosgooglemap_pi1.php. In ihr wird der Bereich
function main($content,$conf) {
...
}
|
ersetzt durch den folgenden Code
function main($content,$conf) {
$this->conf=$conf;
$this->pi_setPiVarDefaults();
$this->pi_loadLL();
$this->pi_initPIflexForm();
$this->lConf = array();
$piFlexForm = $this->cObj->data['pi_flexform'];
foreach ( $piFlexForm['data'] as $sheet => $data )
foreach ( $data as $lang => $value )
foreach ( $value as $key => $val ) {
$this->lConf[$key] = $this->pi_getFFvalue($piFlexForm, $key, $sheet);
// t3lib_div::debug($this->lConf[$key], $key);
}
$width = strval(intval($this->lConf['width']));
if ($width == 0) { $width = 400; }
$height = strval(intval($this->lConf['height']));
if ($height == 0) { $height = 400; }
$latitude = $this->lConf['latitude'];
$latitude = str_replace(',', '.', $latitude);
$latitude = strval(floatval($latitude));
$longitude = $this->lConf['longitude'];
$longitude = str_replace(',', '.', $longitude);
$longitude = strval(floatval($longitude));
if ($latitude == 0 || $longitude == 0) {
$latitude = 48.1456;
$longitude = 11.6156;
}
$zoomlevel = strval(intval($this->lConf['zoom']));
$type = strtoupper($this->lConf['type']);
switch($type) {
case 'NORMAL':
case 'SATELLITE':
case 'HYBRID':
break;
default:
$type = 'HYBRID';
}
$type = 'G_'.$type.'_MAP';
$content="
<div id='map' " .
"style='width: ".$width."px; " .
"height: ".$height."px'></div>
<script type='text/javascript'>
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map'));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(".$latitude.", ".$longitude."), ".$zoomlevel.", ".$type.");
}
//]]>
</script>
";
return $this->pi_wrapInBaseClass($content);
}
|
Der JavaScript-Code beruht auf der TYPO3-DVD Einstieg in TYPO3 4.0 von Thomas Kötter. In der function main wurden einige Zeilen ergänzt. Desweiteren wurden innerhalb content alle tx_-Elemente ersetzt durch $this→lConf[’...’].
Die Datei flexform_ds_pi1.xml muss neu erstellt werden und sieht so aus:
<T3DataStructure>
<sheets>
<sDEF>
<ROOT>
<TCEforms>
<sheetTitle>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.sheet_default</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<width>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.width</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</width>
<height>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.height</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</height>
<latitude>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.latitude</label>
<config>
<type>input</type>
<size>10</size>
</config>
</TCEforms>
</latitude>
<longitude>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.longitude</label>
<config>
<type>input</type>
<size>4</size>
</config>
</TCEforms>
</longitude>
<zoom>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.zoom</label>
<config>
<type>input</type>
<size>2</size>
</config>
</TCEforms>
</zoom>
<type>
<TCEforms>
<label>LLL:EXT:netcos_googlemap/locallang_db.xml:flexform_pi1.type</label>
<config>
<type>input</type>
<size>10</size>
</config>
</TCEforms>
</type>
</el>
</ROOT>
</sDEF>
</sheets>
</T3DataStructure>
|
In diesem Code sind manche Zeilen zu lang. Achten Sie darauf, dass diese Zeilen bei Ihnen nicht umgebrochen werden.
Man kann die Extension verwenden, indem man im TYPO3-Modul Seite auf eine der Seiten den Button Neues Element anlegen drückt und im entstehenden Auswahlfeld das Plugin der Erweiterung aussucht.
Im Plugin können 6 Felder gesetzt werden: die Bildbreite und -höhe, der Breiten- (latitude) und Längengrad (longitude) des Zentrums der Karte, die Zoomgröße für die Karte und der Kartentyp. Diese Felder können frei gesetzt werden. Die Dokumentation der Extension in doc/manual.sxw gibt mehr Details.
Nun sollte die Karte dargestellt werden. Falls nicht, so liegt der Fehler meist bei einem selbst, nicht bei Google. Mögliche Fehler sind:
falsche Kennzahl
die Dezimalzahl für die Grade wurde falsch eingegeben
der Zoomlevel ist eine ganze Zahl zwischen 0 und 19
der Kartentyp darf nur aus 3 festen Werten ausgewählt werden