Googleマップは灰色です

Question

私はモバイルアプリケーションでhtmlとjavascriptを使用してGoogleマップを使用しています。地図をロードすると、地図の左上の5％しか見ることができません。 divコンテナの95％が灰色です。 Firebugでdivを確認したいとき、地図全体が突然読み込まれます。 これは何ですか？ 私はすでにいくつかのStackoverflowスレッドを試しましたが、私のための解決策はありませんでした。 ありがとうございます。

コード：

<link type="text/css" rel="stylesheet" href="jquery.mobile...> 
<link type="text/css" rel="stylesheet" href="index.css"> 
<script type="text/javascript" src="jquery.mobile...></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script> 
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">  </script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8" src="index.js"></script> 

<div id="map" style="width: 700px; height: 700px;"></div> 

var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP         
}); 

index.js

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
}); 

私は％で測定されたdiv要素の属性を使用しまたはEMは、それがすべてで仕事をdoesntの。

Answer 1

はあまりにもドキュメント準備にリサイズメソッドを呼び出してみてください。

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
    google.maps.event.trigger(map, 'resize'); 
}); 

Answer 2

は、その中心または他の特性が正しいかどうか、あなたのmapOptionsを確認してください。私の機会に、センターのプロパティはGoogleマップで解釈できませんでした。ページはCSSとJSPの点で全く誤りがなかったけれど、私は常に灰色の地図しか表示していませんでした。

Answer 3

私の場合、map.refresh()を呼び出すとこの問題が解決されます。私はGmapsを使用しています。

Answer 4

mapTypeIdがNULLだったため、これは私に起こりました。

試してみてください。私の場合は

map.setMapTypeId("roadmap"); 

Answer 5

私は外部のAPIから来た経度を提供するために、逃していました。経度を含むようにAPIが修正されると、問題は解決されました。

Answer 6

私は

// set timeout. 
setTimeout(() => { 
    console.log("attempting refresh"); 
    google.maps.event.trigger(this.map, "resize"); 
    this.map.setZoom(8); 
}, 
100); 

Working Plunker Here（レベルが同じであっても）私は唯一のマップはsetTimeoutとsetZoomを使用して再作成/更新するために得ることができるangular 5
を使用して、同様の質問を持っていました

リフレッシュについて魅力的な点は、地図が表示される2回目に地図を移動することです。 Googleマップは明らかにbug freeではありません。