GoogleMaps-API

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Moin,

vorab: ich habe leider null Ahnung von JavaScript, soll jetzt aber damit auf die GoogleMaps-API (Google Maps JavaScript API Version 3) zugreifen, um Maps anzuzeigen!

Nachdem ich mir 2 - 3 Grundlagentutorials im Web zu Gemüte geführt habe, bin ich jetzt mal angefangen, die “ersten Schritte” der zugehörigen Seite nachzuvollziehen:
(https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld)

Also habe ich mir folgende htm-Datei gebastelt, die ich dann im FF (V32.0.3) per “Datei/Datei öffnen” aufrufe.


<!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: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js&v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Ich habe dabei auch Firebug laufen, um irgendwelche Fehler zu sehen.
Nun scheitert die Ausführung aber schon an der Zeile “center: new google.maps.LatLng(-34.397, 150.644)” mit der Meldung “ReferenceError: google is not defined” … und schon stehe ich endgültig auf dem Schlauch o_O
Wie (und wo) müste ich das denn richtig definieren ??
Und warum steht es dann nicht im Beispiel auf der Webseite ??
Oder muss ich hierfür doch noch was runterladen??
Eigentlich sollte das Objekt doch durch den Aufruf des ersten script-Blocks bekannt sein, oder verstehe ich die Aufrufreihenfolge falsch???
Danke für jedwede Tipps
Klaus

2

Schon mal die URL zum Einbetten der google Lib manuell in die Adresszeile Deines Browsers eingegeben?

Dort kommt nämlich KEIN JavaScript zurück (hab’s grad ausprobiert). Mögliche Ursachen:

  1. Parameter nach dem Dateinamen werden in URLs mit „?“ eingeleitet. Das fehlt bei Deiner URL.
  2. K.A. ob Google es abprüft, aber Deinen API_KEY übergibst Du auch nicht.
3

Moin,

ja, damit testen wir hier gerade rum, klappt scheinbar genauso wenig!
Ok, mit dem ‚?‘ hattest Du Recht, das war vorhin mal durch ein paste&copy von einem Kollegen reingerutscht - ändert aber nix :frowning:

Den API_KEY haben wir hier (noch) nicht, IMHO ist der aber dopch auch nicht zwingend erforderlich, so wie ich die Webseite lese, oder ?

gruß
Klaus

4

hmm, was lustigerweise klappt, ider Aufruf “https://maps.google.com/maps/api/js&v=3.exp&sensor=false” (also NICHT “googleAPIS”).

Nur - auf welche API gehe ich denn dann? die alte V2 ??

Gruß
Klaus

5

Weiß nicht, ob es mit dem “?” wirklich ein C&P-Fehler war. In Deinem letzten Post ist es nämlich wieder falsch :eek:

Ich habe die korrigierte URL nochmal ausprobiert:

https://maps.googleapis.com/maps/api/js?sensor=false

Das lieferte mir JavaScript zurück. Und zwar folgendes:

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
  
  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }
  
  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };
  
  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@276000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=m@276000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"m@276000000",["https://mts0.google.com/vt?lyrs=m@276000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=m@276000000\u0026src=api\u0026hl=de-DE\u0026"]],[["http://khm0.googleapis.com/kh?v=158\u0026hl=de-DE\u0026","http://khm1.googleapis.com/kh?v=158\u0026hl=de-DE\u0026"],null,null,null,1,"158",["https://khms0.google.com/kh?v=158\u0026hl=de-DE\u0026","https://khms1.google.com/kh?v=158\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@276000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=h@276000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"h@276000000",["https://mts0.google.com/vt?lyrs=h@276000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=h@276000000\u0026src=api\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@276000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@276000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"t@132,r@276000000",["https://mts0.google.com/vt?lyrs=t@132,r@276000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=t@132,r@276000000\u0026src=api\u0026hl=de-DE\u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=84\u0026hl=de-DE\u0026","http://khm1.googleapis.com/kh?v=84\u0026hl=de-DE\u0026"],null,null,null,null,"84",["https://khms0.google.com/kh?v=84\u0026hl=de-DE\u0026","https://khms1.google.com/kh?v=84\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt/ft?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?hl=de-DE\u0026","http://mt1.googleapis.com/vt?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt/loom?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt/ft?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt/loom?hl=de-DE\u0026"]]],["de-DE","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com",null,"https://maps.google.com"],["http://maps.gstatic.com/maps-api-v3/api/js/18/5/intl/de_ALL","3.18.5"],[960474438],1,null,null,null,null,null,"",null,null,0,"http://khm.googleapis.com/mz?v=158\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",276000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",276000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"m",276000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"m",276000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",132],[0,"r",132000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[63],[37,[["smartmaps"]]]]],0],[null,[[4,"t",132],[0,"r",132000000]],[null,"de-DE","US",null,18,null,null,null,null,null,null,[[63],[37,[["smartmaps"]]]]],3],[null,null,[null,"de-DE","US",null,18],0],[null,null,[null,"de-DE","US",null,18],3],[null,null,[null,"de-DE","US",null,18],6],[null,null,[null,"de-DE","US",null,18],0],["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt",276000000,132],2,500,["http://geo0.ggpht.com/cbk","http://g0.gstatic.com/landmark/tour","http://g0.gstatic.com/landmark/config","","http://www.google.com/maps/preview/log204","","http://static.panoramio.com.storage.googleapis.com/photos/"],["https://www.google.com/maps/api/js/master?pb=!1m2!1u18!2s5!2sde-DE!3sUS!4s18/5/intl/de_ALL","https://www.google.com/maps/api/js/widget?pb=!1m2!1u18!2s5"],1,0], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/maps-api-v3/api/js/18/5/intl/de_ALL/main.js");
})();

Sieht so aus, als wäre der API_KEY tatsächlich nicht unbedingt nötig…

6

Moin,

so wir haben das Problem gestern Abend noch lösen können :slight_smile:
War was ganz Bitteres: in den Netzwerkeinstellungen des Browsers war „maps.googleapis.com“ als Proxy-Ausnahme eingetragen :o … warum auch immer :grr:

Habe den Eintrag gelöscht, danach klappte es sofort!

Gruß
Klaus