Google map nicht angezeigt

Habe ich nach dem einführende tutorial für Google Maps, aber für einige Grund, die Karte wird nicht angezeigt, auf meiner Webseite. Die entsprechende HTML - /CSS - /JS ist:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=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: 400px; height: 400px"></div>
</body>

</html>

Sich die Karte nicht innerhalb der map_canvas div.

Update

Habe ich verändert die Seite, so dass es nicht verwenden JQuery zum laden der Karte. Es verwendet nun genau das gleiche JS wie in dem tutorial, aber immer noch die map nicht angezeigt.

Sie nicht brauchen, um Euch für alles, was um die Verwendung von Google Maps' JS-API.
du hast Recht, das Abonnement entfernt wurde, in v. 3
wenn Sie geben dem div einen pixel definierte Größe hat die Karte zeigen?
Nein, das habe ich versucht

InformationsquelleAutor Dónal | 2011-10-05

google-maps javascript

15

Gibt es 3 Probleme mit deinem code:

(1) fügen Sie die folgenden Zeilen vor <script type="text/javascript">function initialize() {
```
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script> 
```
Dies ist in dem post von deine Antwort, aber es ist nicht in der Datei http://www.iol.ie/~murtaghd/map/map.htm.

(2), die Sie anrufen initalize() (nochmal: es ist in deinem post, aber nicht in den code):
```
<body onload="initialize();">
```
(3) Legen Sie die Größe der Leinwand, um die Karte angezeigt wird (nochmal: es ist in deinem post, aber nicht in den code). Danach können Sie die Größe ändern, wie Sie möchten.
```
<div id="map_canvas" style="width:500px; height:300px"></div>
```
Sehen Sie die Seite läuft auf jsfiddle.
- (1) - gut erkannt... nicht einschließlich die Google Maps JS-Datei wird verhindert, dass die Google-Anzeigen von der Anzeige!
- Karte wird nicht angezeigt, wenn die Größen sind nicht festgelegt. Danke
- 3. Punkt hat den trick für mich 😛 Danke!
InformationsquelleAutor Jiri Kriz
0

Dein problem ist, du bist unter Bezugnahme auf die jQuery-syntax, aber Sie habe nicht enthalten die jQuery-Bibliothek in Ihre Seite ein. Bekomme ich den JS-Fehler:
```
Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42

Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24
```
Der zweite ist der killer hier.
- Ich habe alle entfernt die JQuery-code, doch das problem besteht weiterhin
InformationsquelleAutor duncan
0

Sollten Sie nicht vergessen, die verwendete Dokument-Typ und laden initialize () - javascript-Funktion auf den tag, dass Sie Ihre Karte und don ' T vergessen, setzen height: und width: zu Ihrem stylesheet, und ich werde arbeiten. wenn Sie nicht n ' T setzen Sie Höhe und Breite wird es nicht zeigen,
```
<!DOCTYPE html>

<body onload="initialize();">
      <div style="height:350px; width:100%;" id="map-canvas"></div>
</body> 
```
InformationsquelleAutor hengsopheak

Nach unzähligen Graben und Tonnen von posts (das waren unnötig übermäßig kompliziert), habe ich festgestellt, dass wenn ich einfach die Höhe und Breite Stile INLINE, die Karte geladen. Ich konnte NICHT legen Sie die Höhe und Breite der map-element in den header oder in eine externe style sheet -- die Karte wird verschwinden. Alles andere zog ich aus der aktuellen (??) google maps api-docs:

Einfach:

  <div id="mapWrapper" style="height:500px; width:500px;">
    <div id="map" style="height:100%"></div>
  </div>  <!-- end of the mapWrapper  --> 
    <script>
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

    </script>

InformationsquelleAutor user2305363

-1

MÜSSEN Sie initialisiert werden, da die Funktion so ändern Sie Ihren code wie folgt:

$(function() {

Zu;

function initialize() {

<body>

Zu:

<body onload="initialize()" >

Und:
});

Zu:
}

Welche sollen das Ergebnis:
```
<!DOCTYPE html>
<html>
<head>
    //This causes the common header, footer, styles, JQuery, etc. to be included
    <meta name="layout" content="main"/>

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        //Use JQuery to trigger the loading of the Map
        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:400px; height:400px"></div>
</body>
</html>
```
- Ihr Vorschlag, dass der name des laden-Funktion ist irgendwie wichtig macht keinen Sinn. Trotzdem, ich versuchte es, und es hat nicht funktioniert.
- Ich habe vergessen zu zählen, die Sie ersetzen MÜSSEN: }); mit } sonst ist es nicht gültig java
- Bearbeiten Sie Ihre obigen Beispiel, als ich gesagt habe, und es durch: draac.com/javatester.html wird es funktionieren, getestet habe ich es ein paar mal vorbei, und das nächste mal bitte untersuchen ein wenig mehr vor der Abstimmung sich jemand. Und was ist, wenn die JS-Datei von Google Referenzen initialisieren?
- Getestet habe ich deinen Vorschlag und es hat nicht funktioniert, um wie viel mehr Untersuchung kann ich tun? Zu sagen, dass eine Funktion ändern, Namen ändern Verhalten macht keinen Sinn
- Das ist nicht Java, es ist JavaScript
- Bitte legen Sie den obigen code durch den tester, die ich oben erwähnt habe, danke.
InformationsquelleAutor A.M.K
-2

Ich hatte das gleiche problem. Dieses bit des Codes:
```
<div id="map_canvas" style="width:500px; height:300px"></div>
```
.. hat mir geholfen - ich habe den Stil-Breite/- Höhe in den markup-Code und es funktionierte.
- Diese Frage wurde bereits beantwortet.
InformationsquelleAutor Der

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.