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

Beitrag lesen

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