Druckbare Version
Hallo zusammen, ich möchte gerne wie auf der Seite http://www.svruemlang.ch/sportplatz.htm eine google map in contao einbauen. Ich habe den Code und alles von Google, doch zeigt es mir dies in Contao nicht an, resp, auch nicht auf der Webpage wenn ich es gespeichert habe. Gibt es da einen Trick oder was spezielles was ich beachten muss, damit die Karte auf der Webpage angezeigt wird ?
Danke für die Hilfe und Grüsse
Michi
Hallo svr,
willkommen in der Contao-Community.
In der Erweiterungsliste gäbe es dafür auch die Erweiterung "dlh_googlemaps". Damit die Extension aber korrekt funktioniert, müsstest Du den Google Maps API-Key in der "Seitenstruktur" im "Startpunkt einer Webseite" eintragen.
Hallo,
die neue maps API V3 benötigt keinen API-key mehr. Man kann das JavaScript als modul 'eigener HTML-Code' einfügen, wenn man in den Einstellungen das <script> tag gestattet.
Hallo Alex,
in diesem und auch im alten Forum gibt es einige Threads, in denen darauf hingewiesen wird, <script> möglichst NICHT direkt zu verwenden.
Besser ist es, den JS-Code in eine Datei z.B. GoogleMap.php zu schreiben, diesen richtig auszukommentieren und unter TL_ROOT/templates abzuspeichern. Dieses Element wird dann mit dem Insert-Tag {{file::*}} in ein HTML-Element der Seite eingefügt.
Hallo,
stehe gerade vor dem selben Problem. Ich möchte ebenfalls eine Karte einbinden, versuche dies aber mit der API Version 3. Damit möchte ich das ganze Procedere mit dem API - Schlüssel, der extra einzubinden ist vermeiden.
Dazu habe ich mir dieses Tutorialbei Google angeschaut. Habe den ganzen Code in einer .php-Datei in
dem Ordner 'templates' abgespeichert, wie 'kos' das in letztem Beitrag geschrieben hat.
Dann habe ich mit dem Insert-Tag '{{file::/templates/googlemaps.php}}', versucht die Datei aufzurufen. Ich habe den Insert-Tag in ein Modul(Eigener HTML Code) eingebunden welches über einen Artikel auf der Seite erscheinen soll. Nur das funktioniert nicht.
Hier mal der Code der Map:
Komme da irgendwie nicht weiter und würde mich über Hilfe freuen. Ist bestimmt nur eine Kleinigkeit da der HTML Code ja funktioniert. Es liegt bestimmt nur daran wie die Map aufgerufen wird.HTML-Code:<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Danke für Eure Hilfe
Hallo Stefan01,
über die Methode "Try & Error" habe ich versucht es nachzubauen. Dazu habe ich ein php-datei erstellt und den folgenden Code abgeändert genutzt:
Sensor auf true oder false gesetzt (wie in der Googleanleitung gefordert) und den oberen CSS-Teil rausgenommen. Im unteren CSS-Teil einfach die Werte nach belieben einstellen. In meinem Fall 400px x 400px.Code:<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
Wenn du nicht alle CSS-Anweisungen per Hand eingeben willst, kannst du es auch unter Themes/CSS mit #map_canvas machen. Aber dann nicht vergessen, den Abschnittin der Datei zu löschen.Code:style="width:400px; height:400px"
Datei im Verzeichnis templates ablegen.
Jetzt Modul mit eigenem html-code erstellen und per Insert-Tageinfügen.Code:{{file::googlemaps.php}}
In deinem letzten Kommentar hast du den Pfad /templates... im Insert-Tag angegeben. Meines Wissens nach brauchst du das nicht, da durch den Insert-Tag automatisch auf das Verzeichnis templates zugegriffen wird.
Bei mir läuft es! Da ich aber selber kein Programmierer bin, betrachte es als Versuch ;)
Gruß
varix
Hallo und vielen Dank!
Funktioniert perfekt!! Ich wusste, dass es sich nur um eine Kleinigkeit handeln musste. Bin eben auch nicht fit mit Programmierung und tüftle genauso rum. Vielleicht kann ich mich ja mal revanchieren, würde mich freuen.
Viele Grüße
Stefan
Das Template von varix müsste wohl noch etwas angepasst werden, da ich mir nicht vorstellen kann, dass die betreffende Seite mit diesem Code validiert (Stichwort: Mehrfache Verwendung der HTML-Tags <html>, <head>, <body> usw.)
Danke für den Hinweis. Würde es reichen, wenn man nur diesen Teil in die PHP-Datei übernimmt?
Müsste ich dann den '<body onload>' im Seitenlayout anpassen? Bin für jeden Hinweis dankbar, da ich mich nicht einfach damit zufrieden geben möchte, dass es läuft. Valider Code sollte es dann doch sein.HTML-Code:<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
Gruß
Stefan
Hallo Stefan01,
probier mal folgendes:
Unter "Themes" -> "Seitenlayout" im Abschnitt "Zusätzliche <head>-Tags" folgendes eintragen:
und im Eingabefeld "Body onload" die Funktion "initialize()" eintragen.HTML-Code:<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
In Deinem Artikel, wo die GoogleMaps-Karte eingebunden werden soll ein neues Inhaltselement vom Typ "HTML" anlegen mit folgendem Code:
(als Alternative könnte man auch ein Modul vom Typ "Eigener HTML-Code" anlegen und dieses dann im Seitenlayout im gewünschten Layoutbereich einbinden)HTML-Code:<div id="map_canvas" style="width:400px; height:400px"></div>
Die Koordinaten müssen selbstverständlich im Code noch entsprechend angepasst werden.
Habe alles wie angegeben gemacht. Nur das Problem ist jetzt: die Karte ist weg. Durch den div-Bereich wird zwar der Platz den ich der Karte zugewiesen habe freigehalten aber scheinbar wird das JS nicht aufgerufen, obwohl ich den Befehl initialize() eingegeben habe.
Hier kannst Du die Seite aufrufen.
Komme jetzt nicht mehr weiter. Vorhin hat es wunderbar funktioniert...
Gruß
Stefan
Hallo Stefan01,
Du musst die Funktion "initialize()" in das Eingabefeld "Body onload" (zu finden im "Seitenlayout" im Abschnitt "Experteneinstellungen") eintragen.
Habe ich ja gemacht. Trotzdem nichts, keine Karte.
Gruß
Stefan
Nein, soweit ich sehe, ist es noch immer falsch!Zitat:
Zitat von Stefan01
Wo hast Du denn "initialize()" eingetragen? Im "Seitenlayout" gibt es dafür ein eigenes Eingabefeld "Body onload"!
Das Seiten-Template "fe_xxx.tpl" und dort den <body>-Tag hast Du aber nicht angepasst oder? Der müsste auf jeden Fall so aussehen;
PHP-Code:<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
"initialize ()" habe ich doch schon längst im Seitenlayout eingegeben. Sieht man ja auch im Quelltext der Seite. Den Code in der Datei fe_page.tpl habe ich auch aktualisiert...echt zum Verrückt werden!
Kein Resultat. Übrigens, wollte gerade einen Screenshot hochladen und änhängen, geht aber nicht. Wenn ich über den Dateimanager den Button hochladen anklicke passiert nichts. Habe ich dazu auf Grund meiner wenigen Beiträge noch keine Rechte?
Gruß
Stefan
Im Quelltext der Seite ist es aber eindeutig falsch!Zitat:
Zitat von Stefan01
Also nochmals der Reihe nach:
Im Backend:
"Themes" -> Icon "Die Seitenlayouts des Theme ID x bearbeiten" -> dort dann das Standard-Seitenlayout editieren -> im Abschnitt "Experten-Einstellungen" gibt es dann ein Eingabefeld "Body onload" -> dort dann "initialize()" eintragen
In der "fe_page.tpl" musst Du dafür überhaupt KEINE Änderung machen. Solltest Du dort den <body>-Tag angepasst haben, dann bitte sicherstellen, dass dort folgendes steht:
PHP-Code:<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
Mir ist ja klar wie ich die Einstellungen bearbeiten kann, wo das Problem meiner Meinung nach jetzt liegen könnte ist, dass ich für die Karte ein extra Layout angelegt habe, dies aber nicht das Standardlayout ist. Der <body> Tag stimmt auch.
Gruß
Stefan
Daran liegt es auch nicht.......
Du musst es auf jedem Fall in jenes Eingabefeld eingeben, welches Du dieser Seite per "Seitenlayout" zugewiesen hast, sonst geht es sicherlich nicht.
Mir scheint aber, dass Du da irgendwas manuell in einer "fe_page.tpl" abgeändert hast, was aber für Dein Vorhaben überhaupt nicht notwendig wäre!
Der <body>-Tag muss im Seiten-Quelltext nämlich so ausschauen:
HTML-Code:<body id="top" onload="initialize()">
Da lag der Fehler! Meine Güte, Du hattest vorher noch geschrieben der <body> Tag müsste so aussehen:Jetzt habe ich ihn geändert wie von Dir beschrieben und alles läuft.HTML-Code:<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
Also nochmals vielen Dank für die tolle Hilfe und Geduld. War mir aber sicher, dass ich im BE alles richtig gemacht habe. Andere Foren können sich wirklich von diesem Forum eine ganz dicke Scheibe abschneiden!!
Wünsche noch einen schönen Abend.
Gruß
Stefan
Fein, dass Du's nun hinbekommen hast.
Diese hier beschriebene Lösung ist allerdings noch etwas suboptimal. Besser wäre auf jeden Fall, wenn das Ganze in eine eigene Erweiterung gegossen werden würde. Dann könnte man nämlich sämtliche Einstellungen bequem vom Backend aus machen. Allerdings ist das dann wieder eine andere Baustelle! :)
Noch ein paar Anmerkungen:
Wie auch schon oben geschrieben, wären im JavaScript-Code noch "Deine" Koordinaten einzutragen, damit Du auch den richtigen Kartenausschnitt angezeigt bekommst.
Weiters ist mir aufgefallen, dass Du in Deinem Seitenlayout anscheinend alle dort verfügbaren "MooTools-Templates" ausgewählt hast. Bei den Lightbox-Templates solltest Du Dich für eines entscheiden: Entweder "Slimbox" oder "Mediabox", beide gleichzeitig würde ich nicht empfehlen. Sofern Du auch Google Analytics verwenden möchtest, dann bitte dieses Template an die LETZTE Stelle der MooTools-Templates verschieben (oder gleich die dafür passende Erweiterung "googleanalytics" verwenden)
Viel Erfolg!
Moin,Zitat:
Zitat von xchs
die oben genannte Extension wird in absehbarer Zeit wohl auf V3 gehoben werden.
Grüße,
Christian
Klingt sehr gut! Vielen Dank für Deine Arbeit.Zitat:
Zitat von christian