Google Maps API zeigt graue Karte auf Ajax-Seite laden

Question

Ich benutze Ajax, um die Seite, die die Google-Karte enthält, in eine div zu laden, aber wenn es fertig geladen ist, zeigt es nur einen grauen Hintergrund für die Karte mit einem Links unten das Google-Logo und unten rechts ein Link "Nutzungsbedingungen".

Wenn ich die Größe des Fensters ändere, erscheint sofort die Karte. Wenn ich die gesamte Seite neu lade, indem ich F5 drücke, wird die Karte normal geladen. Erst wenn ich diese Map-Seite mit jQuery ajax lade, erhalte ich die graue Map.

Auf der Containerseite lade ich die Karten api.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

Auf der Kartenseite mache ich alles andere.

$(document).ready(function() { 
    initializeMap(); 
}); 

function initializeMap() { 
    var companyname = document.getElementById("companyname").value; 

    infowindow = new google.maps.InfoWindow(); 
    latlng = new google.maps.LatLng(-34.397, 150.644); 

    var mapOptions = { 
    zoom: 13, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    geo = new google.maps.Geocoder(); 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    bounds = new google.maps.LatLngBounds(); 

    resultsPanel = new google.maps.DirectionsRenderer({suppressMarkers:true}); 
    resultsPanel.setMap(map); 

    $("#progressbar").progressbar(0); 

    var companyaddress = getCompanyAddress(); 
    setCompanyMarker(companyaddress,companyname) 
} 

Auf Resize neu berechnen ich die Höhe, so dass es die ganze Seite füllt. Wenn ich das nicht mache, öffnet sich die Karte mit 1px Höhe, obwohl ich nicht weiß warum. Könnte das das gleiche Problem sein?

function calculateHeight(){ 
    var height = $('#maincontent').height(); 
    $('#map-canvas').css("height",height); 
} 

$(window).resize(function() { 
    calculateHeight(); 
}); 

Da die Karte angezeigt wird, wenn der Benutzer das Fenster passt die Größe manuell dachte ich programmatisch das Resize-Ereignis ruft die gleiche Wirkung hätte, habe ich so das:

$(window).trigger('resize'); 

Aber das tat nichts.

Ich versuchte, das api-Skript auf die Kartenseite zu verschieben, aber das verursachte eine "Sie haben das gleiche Skript mehrmals geladen" Fehler, wenn ich die Seite mehr als einmal laden, die dann andere Fehler ausgelöst. Mit diesem Setup konnte ich jedoch die Karte erfolgreich mit Ajax nach drei Seitenlasten laden. Mit anderen Worten, nachdem ich die Containerseite einmal geladen habe, muss ich dreimal auf den Menüpunkt klicken (der die Kartenseite lädt), damit er richtig geladen wird. Die ersten beiden Male kann es immer noch nicht richtig geladen werden, aber danach wird es jedes Mal ordnungsgemäß geladen, allerdings mit einer Ladung JavaScript-Fehlern.

Ich habe auch versucht, die api-Skript asynchron nach this suggestion laden.

Ich habe auch versucht, "async defer" zum api Skript wie this suggestion hinzuzufügen.

Keiner dieser Vorschläge funktionierte, und jetzt bin ich hier.

Was bewirkt, dass die Karte mit einem grauen Hintergrund geladen wird, wenn die Seite über Ajax geladen wird, und was kann ich dagegen tun?

Answer 1

1.Stellen Sie sicher, dass map-canvaswidth in CSS festgelegt ist.

2.Wenn genau haben Sie versucht, google.maps.event.trigger(map,'resize'); als Geocodezip vorgeschlagen zu nennen? Sie müssen es nach jeder map-canvas Div Dimension ändern (calculateHeight) oder eine Änderung der Sichtbarkeit von Karten div. Wenn die map-canvas div-Klasse oder die übergeordnete Klasse oder die übergeordnete Komponente der übergeordneten Klasse (ein Vorgänger) display:none zu einem bestimmten Zeitpunkt enthält, wird die Kartenansicht nicht ordnungsgemäß initialisiert, und Sie sehen nur eine graue Karte. Fügen Sie auch den Karten-Größenänderungscode in ein Timeout ein, um sicher zu sein, und senken Sie ihn dann, wenn er funktioniert, z.g:

function calculateHeight(){ 
    var height = $('#maincontent').height(); 
    $('#map-canvas').css("height",height); 
    setTimeout(function(){ //also do this after any other visibility/dimension change 
    google.maps.event.trigger(map,'resize'); 
    }, 500); 
} 

Answer 2

die Sie interessieren, die google.maps.event.addListener(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); }); map.setZoom(map.getZoom() - 1); map.setZoom(map.getZoom() + 1);

für mich gearbeitet