Khartir: Google Maps API einbinden ... Anfängerfehler?

SELF-Forum

Google Maps API einbinden ... Anfängerfehler?

Khartir
– Informationen zu den Bewertungsregeln

Hallo,

versuche gerade die google maps API bei uns im Webshop (osCommerce 2.3) einzubauen. leider bin ich mit JS nicht so vertraut und arbeite mich hier nebenbei ein. Das Problem ist folgendes:
<head></head> (wo ich sinnvollerweise meine map.js eibinden möchte) stehen in einer Datei template_top.php. Diese wird dann per include in der eigentlichen map.php eingebunden, in welcher sich auch das <div>-Element befindet, in der die karte angezeigt werden soll. Wenn ich nun aber meinen Verweis auf die map.js innerhalb der template_top.php einfüge funktioniert die ganze Sache nicht.
Es klappt nur, wenn der Verweis zu Beginn der map.php und damit vor dem <head>-tag steht.

Hat irgendjemand eine Idee was hier los ist?

Schonmal Danke im Vorraus.

Quellcode:

  
  <script type="text/javascript" src="ext/jquery/map.js"></script>  
  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>testshop</title>  
  
<script type="text/javascript"  
      src="https://maps.googleapis.com/maps/api/js?sensor=false">  
    </script>  
  
<base href="" />  
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.22.css" />  
<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>  
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>  
  
<script type="text/javascript">  
// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484  
if ( $.attrFn ) { $.attrFn.text = true; }  
</script>  
  
  
<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>  
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />  
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>  
<link rel="stylesheet" type="text/css" href="ext/960gs/960_24_col.css" />  
<link rel="stylesheet" type="text/css" href="stylesheet.css" />  
</head>  
<body>  
  
<div id="bodyWrapper" class="container_24">  
  
  
<div id="header" class="grid_24">  
  <div id="storeLogo"><a href="" alt="testshop" title=" testshop " width="759" height="116" /></a></div>  
  
  <div id="headerShortcuts">  
<span class="tdbLink"><a id="tdb1" href="">Warenkorb</a></span><script type="text/javascript">$("#tdb1").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script><span class="tdbLink"><a id="tdb2" href="">Kasse</a></span><script type="text/javascript">$("#tdb2").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script><span class="tdbLink"><a id="tdb3" href="">Ihr Konto</a></span><script type="text/javascript">$("#tdb3").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>  </div>  
  
<script type="text/javascript">  
  $("#headerShortcuts").buttonset();  
</script>  
</div>  
  
<div class="grid_24 ui-widget infoBoxContainer headerBreadcrumb">  
  <div class="ui-widget-header infoBoxHeading">&nbsp;&nbsp;<a href="">Laborseite</a> &raquo; <a href="" class="headerNavigation">Online-Shop</a> &raquo; <a href="" class="headerNavigation">Ihr Konto</a></div>  
</div>  
  
  
<div id="bodyContent" class="grid_17 push_3">  
<h1>Ihre pers&ouml;nlichen Daten</h1>  
  
  
<div class="contentContainer">  
  <h2>Ihr Konto</h2>  
  
  <div class="contentText">  
  
    <div id="map_canvas" style="width: 100%; height: 100%">  
    </div>  
    <input type="button" value="Encode" onclick="initialize()">  
  </div>  
  
  
</div>  
  
  
</div> <!-- bodyContent //-->  
  
  
<div id="columnLeft" class="grid_3 pull_17">  
  <div class="ui-widget infoBoxContainer">  </div>  
<div class="ui-widget infoBoxContainer">  <div class="ui-widget-header infoBoxHeading">Schnellsuche</div>  <div class="ui-widget-content infoBoxContents" style="text-align: center;">    <form name="quick_find" action="" method="get">    <input type="text" name="keywords" size="10" maxlength="30" style="width: 75%" />&nbsp;<input type="hidden" name="search_in_description" value="1" /><input type="image" src="includes/languages/german/images/buttons/button_quick_find.gif" alt="Schnellsuche" title=" Schnellsuche " />    </form>  </div></div>  
<div class="ui-widget infoBoxContainer">  <div class="ui-widget-header infoBoxHeading">Informationen</div>  <div class="ui-widget-content infoBoxContents">    <a href="">Versandkosten</a><br />    <a href="">Unsere AGB</a><br />    <a href="">Impressum und Kontakt</a>  </div></div></div>  
  
  
<div id="columnRight" class="grid_4">  
  <div class="ui-widget infoBoxContainer">  <div class="ui-widget-header infoBoxHeading"><a href="">Einkaufswagen</a></div>  <div class="ui-widget-content infoBoxContents">0 Waren</div></div></div>  
  
  
  
<div class="grid_24 footer">  
  <p align="center">Copyright &copy; 2013 <a href="">testshop</a><br>Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a></p>  
</div>  
  
  
<script type="text/javascript">  
$('.productListTable tr:nth-child(even)').addClass('alt');  
</script>  
  
</div> <!-- bodyWrapper //-->  
  
  
</body>  
</html>

map.js:

  
      function initialize() {  
        var mapOptions = {  
          center: new google.maps.LatLng(-34.397, 150.644),  
          zoom: 8,  
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };  
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
      }
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Google Maps API einbinden ... Anfängerfehler?

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Khartir,

    was meldet die Fehlerkonsole, wenn der Scriptaufruf an der richtigen Stelle steht, also im head oder im body?

    Kann man sich das mal online ansehen?

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Google Maps API einbinden ... Anfängerfehler?

      Khartir
      – Informationen zu den Bewertungsregeln

      Hallo,

      die Fehlerkonsole sagt gar nichts, bzw nichts anderes als wenn es vor dem head steht. Es gibt einige Fehler die immer auftreten, die aber mit dem Layout zusammenhängen.
      Der link ist http://www.envichem.de/shop23/catalog/map.php den hatte ich vergessen ^^.

      Gruß und Danke.

      Hallo Khartir,

      was meldet die Fehlerkonsole, wenn der Scriptaufruf an der richtigen Stelle steht, also im head oder im body?

      Kann man sich das mal online ansehen?

      Gruß, Jürgen

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Google Maps API einbinden ... Anfängerfehler?

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Khartir,

        Der link ist http://www.envichem.de/shop23/catalog/map.php den hatte ich vergessen ^^.

        OK, da kann man die Karte sehen, wenn man auf dem Knopf klickt. Und jetzt zeig mal die Variante mit allen Scripte im head oder body, also eine valide Seite.

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Google Maps API einbinden ... Anfängerfehler?

          Khartir
          – Informationen zu den Bewertungsregeln

          Meinst du so? http://www.envichem.de/shop23/catalog/map2.php

          Interessanterweise habe ich gerade festgestellt dass

          google.maps.event.addDomListener(window, 'load', initialize);

          in der map.js auch nicht funktioniert.

          Gruß

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Google Maps API einbinden ... Anfängerfehler?

            JürgenB Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo Khartir,

            zwei Fehler:

            Zeitstempel: 14.03.2013 15:18:14
            Fehler: SyntaxError: missing : after property id
            Quelldatei: http://www.envichem.de/shop23/catalog/ext/jquery/map.js
            Zeile: 23, Spalte: 10
            Quelltext:
                google.maps.event.addDomListener(window, 'load', initialize);

            Zeitstempel: 14.03.2013 15:18:15
            Fehler: ReferenceError: initialize is not defined
            Quelldatei: http://www.envichem.de/shop23/catalog/map2.php
            Zeile: 1

            Bring mal den ersten Fehler in Ordnung, der zweite ist ein Folgefehler.

            Außerdem ist

            <div id="map_canvas" style="width: 100%; height: 100%">

            keine gute Idee, da das übergeordnete Element keine Höhe hat. Nimm hier lieber vernünftoge Pixelangaben oder gib html und body auch 100%.

            Gruß, Jürgen

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Google Maps API einbinden ... Anfängerfehler?

              Khartir
              – Informationen zu den Bewertungsregeln

              Hallo Jürgen,

              ja der Fehler ist behoben, das lag an dem google.maps.event.addDomListener(window, 'load', initialize); was auch immer damit nicht in Ordnung ist. Ich ahb das mal ausgeklammert.
              Die Formatierung ist mir im Moment ehrlich gesagt noch ziemlich wurst, das ganze muss ich sowieso noch richtig einbauen, aber danke für den Hinweis.

              Gruß, Khartir

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Google Maps API einbinden ... Anfängerfehler?

                JürgenB Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo Khartir,

                ja der Fehler ist behoben, das lag an dem google.maps.event.addDomListener(window, 'load', initialize); was auch immer damit nicht in Ordnung ist. Ich ahb das mal ausgeklammert.
                Die Formatierung ist mir im Moment ehrlich gesagt noch ziemlich wurst, das ganze muss ich sowieso noch richtig einbauen, aber danke für den Hinweis.

                du solltest dir mal ansehen, wo ein "," und wo ein ";" hin muss und wo nicht, vor allem bei der litteralen Schreibweise von Arrays [a,b,c] und Objekten {a,b,c}. Die Google Maps API ist zu komplex, als dass man ohne JS-Kenntnisse mit ihr klar kommt.

                Gruß, Jürgen

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Google Maps API einbinden ... Anfängerfehler?

                  Khartir
                  – Informationen zu den Bewertungsregeln

                  Hallo Jürgen,

                  die Zeile stimmt schon so, die ist direct aus dem google maps Developers Guide übernommen. Das Problem da war nur die Position, ich hatte sie in der initialize-funktion selbst stehen, was natürlich falsch ist. Hab sie jetzt an die richtige Stelle verfrachtet und das ganze funktioniert einwandfrei. Komme auch sonst ganz gut mit der API an und für sich zurecht, bis auf mein ursprüngliches Problem.
                  Ich meine ich kann das ganze problemlos so schreiben wie ich es auf http://www.envichem.de/shop23/catalog/map.php habe, es irritiert mich aber, dass http://www.envichem.de/shop23/catalog/map2.php nicht funktioniert obwohl das meiner Ansicht nach ja die richtige Variante ist. Und ich bekomme keine Fehlermeldung die mir erklärt warum.

                  Gruß, Khartir

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Google Maps API einbinden ... Anfängerfehler?

                    JürgenB Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    Hallo Khartir,

                    mein Verdacht: die Höhenangabe 100% in

                    <div id="map_canvas" style="width: 100%; height: 100%">

                    gibt dem div die Höhe 0px. Nimm da mal Pixelwerte. Die falsche Struktur in der anderen Version schickt den Browser in den Quirksmode, wo die 100% das Browserfenster als Bezug nehmen.

                    Sonst hilft nur noch systematische Fehlersuche: alerts an strategischen Stellen, das ganze jquery-Zeugs raus nehmen, ... .

                    Gruß, Jürgen

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Google Maps API einbinden ... Anfängerfehler?

                      Khartir
                      – Informationen zu den Bewertungsregeln

                      Manchmal sollte man einfach zuhöhren und ALLE Ratschläge befolgen wenn man schon um Hilfe fragt... dann wäre die Angelegenheit schon vor Stunden erledigt gewesen.

                      Herzlichen Danke,

                      Khartir

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln