Ergebnis 1 bis 23 von 23

Thema: Google Map Karte anzeigen

  1. #1
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard Google Map Karte anzeigen

    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

  2. #2
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  3. #3
    Contao-Nutzer
    Registriert seit
    05.08.2009.
    Beiträge
    119

    Standard

    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.
    Grüße, Alex

  4. #4
    Contao-Fan Avatar von kos
    Registriert seit
    22.06.2009.
    Ort
    Westerwald
    Beiträge
    888

    Standard

    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.

  5. #5
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard Google Map mit Javascript API V3

    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:
    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>
    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.

    Danke für Eure Hilfe

  6. #6
    Contao-Fan Avatar von varix
    Registriert seit
    26.03.2010.
    Ort
    Berlin
    Beiträge
    626

    Standard

    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:

    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>
    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.
    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 Abschnitt
    Code:
     style="width:400px; height:400px"
    in der Datei zu löschen.

    Datei im Verzeichnis templates ablegen.

    Jetzt Modul mit eigenem html-code erstellen und per Insert-Tag
    Code:
    {{file::googlemaps.php}}
    einfügen.

    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
    Geändert von varix (15.09.2010 um 14:47 Uhr)

  7. #7
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    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

  8. #8
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.)
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  9. #9
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Danke für den Hinweis. Würde es reichen, wenn man nur diesen Teil in die PHP-Datei übernimmt?

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

    Gruß

    Stefan

  10. #10
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Stefan01,

    probier mal folgendes:

    Unter "Themes" -> "Seitenlayout" im Abschnitt "Zusätzliche <head>-Tags" folgendes 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>
    und im Eingabefeld "Body onload" die Funktion "initialize()" eintragen.

    In Deinem Artikel, wo die GoogleMaps-Karte eingebunden werden soll ein neues Inhaltselement vom Typ "HTML" anlegen mit folgendem Code:
    HTML-Code:
    <div id="map_canvas" style="width:400px; height:400px"></div>
    (als Alternative könnte man auch ein Modul vom Typ "Eigener HTML-Code" anlegen und dieses dann im Seitenlayout im gewünschten Layoutbereich einbinden)

    Die Koordinaten müssen selbstverständlich im Code noch entsprechend angepasst werden.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  11. #11
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard Danke für die Hilfe

    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

  12. #12
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Stefan01,

    Du musst die Funktion "initialize()" in das Eingabefeld "Body onload" (zu finden im "Seitenlayout" im Abschnitt "Experteneinstellungen") eintragen.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  13. #13
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Habe ich ja gemacht. Trotzdem nichts, keine Karte.


    Gruß

    Stefan

  14. #14
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Stefan01 Beitrag anzeigen
    Habe ich ja gemacht. Trotzdem nichts, keine Karte.
    Nein, soweit ich sehe, ist es noch immer falsch!

    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; ?>>
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  15. #15
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    "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
    Geändert von Stefan01 (15.09.2010 um 18:19 Uhr)

  16. #16
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Stefan01 Beitrag anzeigen
    "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.

    Gruß

    Stefan
    Im Quelltext der Seite ist es aber eindeutig falsch!

    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; ?>>
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  17. #17
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    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

  18. #18
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Daran liegt es auch nicht.......

  19. #19
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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()">
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  20. #20
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard SUPER!!!

    Da lag der Fehler! Meine Güte, Du hattest vorher noch geschrieben der <body> Tag müsste so aussehen:
    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; ?>>
    Jetzt habe ich ihn geändert wie von Dir beschrieben und alles läuft.


    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

  21. #21
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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!
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  22. #22
    Alter Contao-Hase Avatar von christian
    Registriert seit
    15.06.2009.
    Ort
    Viersen
    Beiträge
    1.038
    Partner-ID
    387

    Standard

    Zitat Zitat von xchs Beitrag anzeigen
    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!
    Moin,

    die oben genannte Extension wird in absehbarer Zeit wohl auf V3 gehoben werden.

    Grüße,

    Christian
    Contao-Partner am Niederrhein
    Templating - Komplettservice - Erweiterungen
    Infos: http://delahaye.de

  23. #23
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.557
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von christian Beitrag anzeigen
    Die oben genannte Extension wird in absehbarer Zeit wohl auf V3 gehoben werden.
    Klingt sehr gut! Vielen Dank für Deine Arbeit.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Erweiterung, um Standorte in eine Karte einzutragen
    Von Tina im Forum Sonstige Erweiterungen
    Antworten: 6
    Letzter Beitrag: 29.03.2011, 11:45
  2. Google Maps "Meine Karte" einbinden
    Von kubjo im Forum Allgemeine Inhaltselemente
    Antworten: 6
    Letzter Beitrag: 09.02.2011, 12:12
  3. Antworten: 0
    Letzter Beitrag: 21.01.2011, 10:07
  4. Europa Karte mit Händlern
    Von stefano6 im Forum Allgemeine Inhaltselemente
    Antworten: 6
    Letzter Beitrag: 10.01.2011, 18:35
  5. Eine Karte von google maps einbinden aber wie?
    Von dominik im Forum dlh_googlemaps
    Antworten: 5
    Letzter Beitrag: 23.12.2010, 12:15

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •