javascript - Google マップ API が正しく表示されない jQuery slideToggle

Question

Google マップを div 内に配置し、slideToggle を div に作成しました。Google マップが正しく表示されません。

div が展開されると、下のマップのように正しく表示されません

jsFiddle Sampleのコードを確認してください

<div class="click">
  <div class="hide">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

Answer 1

のイベント リスナーを追加して、マップがロードされるまで待つことができますidle。このイベントは、マップが完全に読み込まれて準備が整うと発生します。

google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.hide').hide();
});

これがJSFiddleです。

編集：

同様の問題を抱えている人のために、マップがオフスクリーンに配置された更新された JSFiddleを次に示します。使用せずに非表示のままにしdisplay:noneます。

Answer 2

マップがレンダリングを終了するまで待つ必要があります。次にマップを非表示に設定する必要があります。これは、div が非表示のときにマップ div がトグルされ、マップが間違った場所に見えるようにするためです。init 関数は次のようになります。

function initialize() {
  var latlng = new google.maps.LatLng(48.89376,2.33742); 
    var settings = {
    zoom: 15,
      center: latlng,
      disableDefaultUI: true,
        zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), settings);
  var marker=new google.maps.Marker({
    position:latlng,
  });

  marker.setMap(map);

  // on map idle set div hide
  google.maps.event.addListenerOnce(map, 'idle', function() {
      $('.hide').hide();
  });
}