Hier eine kleine Anleitung wie man Google Maps in CMS-Seiten auf [I]unaufdringliche[/I] Weise einbindet.
- neue [B]CMS-Seite[/B] anlegen auf der Karte erscheinen soll. Die Variable SHOW_GMAP sorgt dann dafür, dass die Google Maps API nur auf dieser Seite eingebunden wird.
[{ assign var="SHOW_GMAP" value="true" }]
<div id="map"></div>
- [B]_footer.tpl[/B] anpassen (weiter unten), inkl. der Abfrage der Variable aus der CMS-Seite.
...
<?php
$sDomain = $_SERVER[ 'HTTP_HOST' ];
switch ( $sDomain ) {
/* Key für localhost Entwicklung */
case ( 'localhost/oxid' ) :
$sKey = 'GOOGLE_MAPS_KEY';
$sLang = 'de';
break;
/* Key für Live Server */
case ( 'www.meine-domain.de' ) :
$sKey = 'GOOGLE_MAPS_KEY';
$sLang = 'de';
break;
}
/* Google API einbinden */
if ( $sKey ) {
echo '<script type="text/javascript" src="http://www.google.com/jsapi?key=' . $sKey . '"></script>';
}
?>
<script type="text/javascript">
google.load('jquery', '1.3.2');
[{if isset($SHOW_GMAP)}]google.load('maps', '2', {'language' : '<?php echo $sLang; ?>'});[{/if}]
</script>
<script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]js/meine-js-funktionen.js"></script>
...
</body>
- [B]meine-js-funktionen.js[/B] anpassen.
var MEINNAMESPACE = {
init: function() {
MEINNAMESPACE.initGMap();
}, /* END init() */
map: '',
initGMap: function() {
if (document.getElementById('map')) {
if (typeof GBrowserIsCompatible !== 'undefined' && GBrowserIsCompatible()) {
MEINNAMESPACE.map = new google.maps.Map2(document.getElementById('map'));
/* Karte ausrichten (Frankfurt am Main) */
var centerView = new GLatLng(50.1115118, 8.6805059);
MEINNAMESPACE.map.setCenter(centerView, 13);
/* Karten Controlls hinzufügen */
MEINNAMESPACE.map.addControl(new GLargeMapControl3D());
MEINNAMESPACE.map.addControl(new GMapTypeControl());
/* Kartentyp festlegen */
MEINNAMESPACE.map.setMapType(G_NORMAL_MAP);
/* Grösse des Infow Fenster überprüfen sobald Info Window geöffnet wird */
MEINNAMESPACE.map.checkResize();
}
else {
alert('Achtung! Die Google Maps API ist mit diesem Browser nicht kompatibel!');
}
}
/* Marker erstellen (Funktion) */
function createMarker(gm_point, gm_html) {
var html = gm_html;
var marker = new GMarker(gm_point, {
title: 'Mein Tooltip'
});
/* Google Maps Info Window Options */
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html, { maxWidth: '275' } );
});
return marker;
} /* END createMarker() */
/* Marker erstellen (Frankfurt am Main) */
var gm_point = new GLatLng(50.1115118, 8.6805059);
/**
* hier inline CSS verwenden, da Google Maps die Grösse des Fensters vor dem ausliefern
* berechnet und somit nachträgliches anpassen per CSS die Grösse des Fensters NICHT ändert!
*/
var gm_html = '<div style="font-size: 12px;"><strong>z.B. Meine Adresse</strong><br />'
+ 'usw.'
+ '<strong>usw.</strong></div>';
var marker = createMarker(gm_point, gm_html);
/* Marker auf Karte setzen */
MEINNAMESPACE.map.addOverlay(marker);
} /* END initGMap */
}
/* DOM Ready */
$(document).ready(function() {
MEINNAMESPACE.init();
});
/* Google Maps Unload */
$(document.body).unload(function() {
if (GBrowserIsCompatible()) {
GUnload();
}
});
Hoffe es hat euch gefallen. Viel Spass beim probieren.
Fragen / Anmerkungen:
[1] Gibt es eine Möglichkeit die Switch Case PHP auch als Smarty umzusetzen? Habe mit Smarty noch recht wenig Erfahrung.
[2] Kommentare, konstruktive Kritik, Verbesserungsvorschläge, immer her damit 
Gruss
Eddie
