GoogleMapsAPI-PHP-jQuery-GoogleCDN-CMS-Seiten-Smarty-Tutorial

Hier eine kleine Anleitung wie man Google Maps in CMS-Seiten auf unaufdringliche Weise einbindet.

1. Neue CMS-Seite 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" }]

2. footer.tpl anpassen (weiter unten),

inkl. der Abfrage der Variable aus der CMS-Seite.

...
...

3. Meine-js-funktionen.js 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();
 
				/* 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 = '
z.B. Meine Adresse
‚ + ‚usw.‘ + ‚usw.

‚; var marker = createMarker(gm_point, gm_html); /* Marker auf Karte setzen */ MEINNAMESPACE.map.addOverlay(marker); } else { alert(‚Achtung! Die Google Maps API ist mit diesem Browser nicht kompatibel!‘); } } } /* 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. —Seifert.eduard



0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.