GoogleマップAPIは、ajaxページのグレーマップを表示します。

Question

私はajaxを使ってGoogleマップを含むページをロードしていますが、ロードが完了するとマップの灰色の背景のみが表示されます左下にGoogleロゴ、右下に「利用規約」のリンクが表示されます。

ウィンドウのサイズを変更すると、マップはすぐにと表示されます。また、F5キーを押してページ全体をリロードすると、マップは正常にロードされます。私が最初にjQuery ajaxを使ってこのマップページをロードして、グレーマップを取得したときだけです。

コンテナページで、マップapiを読み込みます。

地図ページで私は他に何かをしています。

$(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) 
} 

サイズ変更時に、高さを再計算して全ページを塗りつぶします。私がこれをしなければ、地図は1pxの高さで開きますが、理由はわかりません。それは同じ問題だろうか？ユーザーが手動でウィンドウのサイズを変更したときにマップが表示されますので

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

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

私はプログラム的にresizeイベントを呼び出すと、同じ効果を持っているだろうと思ったので、私はこの追加：

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

をしかし、それは何もしませんでした。

apiスクリプトをマップページに移動しようとしましたが、ページを複数回ロードすると「」という同じスクリプトを複数回ロードしたため、「」エラーが発生し、その他のエラーが発生しました。しかし、この設定では、3ページのロード後にajax を使用してマップを正常にロードできました。つまり、コンテナページを一度ロードした後、適切にロードされるように、メニュー項目をクリックして（地図ページをロードする）3回クリックする必要があります。最初の2回はまだ正しく読み込まれませんが、その後は毎回適切に読み込まれますが、JavaScriptエラーが発生します。

また、this suggestionのように非同期にAPIスクリプトを読み込もうとしました。

this suggestionのように、「async defer」をapiスクリプトに追加しようとしました。

これらの提案はどちらもうまくいきませんでしたが、今ここにいます。

ページがajax経由で読み込まれたときに灰色の背景が表示される原因とは何ですか？

Answer 1

1. map-canvasには、CSSにが設定されていることを確認してください。

2.正確にジオコードデップとしてgoogle.maps.event.trigger(map,'resize');を呼び出してみましたか？ map-canvasディメンションの変更（calculateHeight）またはマップdivの表示の変更が行われた後に呼び出す必要があります。 map-canvas div、またはその親であるか、親の親（前のいずれか）にある時点でdisplay:noneが設定されていると、マップビューが正しく初期化されず、グレーマップのみが表示されます。また、地図のサイズ変更コードをいくつかのタイムアウトに追加してください。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

が私のために google.maps.event.addListener(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); }); map.setZoom(map.getZoom() - 1); map.setZoom(map.getZoom() + 1);