Googleマップこれはコードavscript私gmapsある画像とマーカー

Question

をロードされない、私は私のデータをデータベースと同数のマップを印刷し、これらgmapsは崩壊のdivで内部です：

var maps = {!! $maps !!}; 
var googlemaps = []; 

$.each(maps, function(key, item) { 
    googlemaps[key] = new GMaps({ 
     div: '#gmaps-' + key, 
     lat: item.latitude, 
     lng: item.longitude, 
     width: '100%', 
     height: '100%', 
    }); 

    googlemaps[key].addMarker({ 
     lat: item.latitude, 
     lng: item.longitude, 
     width: '100px', 
     draggable: false, 
     title: 'Marker' 
    }); 

    googlemaps[key].setCenter(item.latitude, item.longitude); 
    googlemaps[ key ].setZoom(15); 
}); 

デフォルトではdiv要素が折りたたまれ、後divを開いてgmapsを表示すると、空白のグレーマップが表示されます。マップをドラッグしてマーカを検索しようとすると、左上のgmapsパネルの一部しか表示されません。

私のブラウザのサイズを変更した後、マーカーはパネルの中央にドラッグできますが、グレーのままです。

ズームインして画像をロードしました。画像はズームインしたときにのみ読み込まれました。

私は本当に多くの答えを探していましたが、私の問題を解決していませんでした。

マップdiv、またはその親、またはそれは、親の親（任意の前身）ですがdisplay:noneスタイルを持って、そしてあなたがマップを作成すると...

Answer 1

を助けてください、マップビューが正しく初期化されません。マップビューでresizeイベントをトリガーして、マップビューを再初期化する必要があります。

google.maps.event.trigger(googlemaps[key].map, "resize"); 

はdiv要素が表示されたら、それをトリガーすることを忘れないでください：あなたのコードはこのような何かを見て必要がありますので、

GMapsでgoogle.maps.Mapオブジェクトは、.map属性を使用してアクセスできます。リサイズトリガーをタイムアウトにするには、表示するdivをクリックする必要があります。

サイドノート：認識しているかわかりませんが、作成するすべてのマップが別々のAPIコールであるため、複数のマップで別々のAPIコールが多数発生し、ビジネスライセンスのマップがない場合かなり速く限界に達することができます。