2010-12-13 26 views
1

Ich konnte das grundlegende Google Maps-Beispiel nicht auf meiner Website verwenden. Ich habe folgendes div auf meiner Seite:Google Maps API-Basisbeispiel

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

und die folgend im Kopf meines Dokuments:

<script type="text/javascript" src="http://maps.google.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); 
    } 
    jQuery(document).ready(initialize); 
</script> 

Es scheint, dass die Elemente in meinen DOM geladen werden immer, aber es gibt keine sichtbare Karte auf der Seite.

Antwort

3

Laut Google Map not showing up scheint es, dass Prozentgrößen auf dem Div (z. B. 100%) nicht ordnungsgemäß funktionieren. Ich musste explizit eine Pixelhöhe und -breite für das div angeben.

+0

Um Mike Williams Online-Ressource zu zitieren - http://econym.org.uk/gmap/basic19.htm - "Wenn Sie versuchen, style =" width: 100%; height : 100% "auf Ihrer Karte div, erhalten Sie eine Karte div, die Null Höhe hat. Das ist, weil das div versucht, ein Prozentsatz der Größe der , aber standardmäßig hat eine unbestimmte Höhe [...] a Eine einfache Alternative ist, die so zu ändern, dass ihre Höhe 100% der Seite beträgt. " –

0

Sie haben jQuery auf Ihrer Website aktiviert? Andernfalls erstellen Sie innerhalb Ihres Body-Tags ein "onload = initialize();" - Attribut, damit das Javascript ausgeführt wird.

Soweit ich weiß Ihre Initial-Anfrage benötigt einen API-Schlüssel?

+1

Ja 100% Breite Höhe verwendet, ich habe jQuery aktiviert. Die Funktion initialize() wird aufgerufen, wenn das Dokument geladen wird. Der API-Schlüssel ist Teil des alten Google Maps-APIs der Version 2 und wird nicht mehr benötigt. – Kyle

0

Der Code sieht gut aus und ähnelt den Beispielen aus der Dokumentation, damit er ordnungsgemäß funktioniert.

Haben Sie versucht, einige Informationen auf dem Bildschirm aus der Initialisierungsfunktion zu drucken? Überprüfen Sie, ob die Parameter latlng, myoptions und map korrekt erstellt wurden.

Wenn sie sind, ist es ein Problem mit der Initialisierungsfunktion aufrufen ...

0

ich Ihren Code getestet und iw funktioniert gut, wenn ich <body onload="initialize()"> verwenden als da_didi vorgeschlagen. Haben Sie eine Import-Anweisung für jquery.js?

+0

Ja, jQuery wird importiert und funktioniert ordnungsgemäß. Wie ich im OP und als Kommentar zu da_didi erwähnt habe, wird die Initialisierungsfunktion aufgerufen und es scheint, dass einige Elemente in das div geladen werden. – Kyle

+0

Vielleicht können Sie Ihren Beitrag bearbeiten und den gesamten Code für uns zu helfen.Oder hochladen es zum Netz und zeigt uns darauf –