JavaScript로 Google 지도 크기 조정

Google이 포함된 "mapwrap" div의 크기를 조정한 후 Google 타일이 사라지는 문제가 발생했습니다. 지도. 이 문서에서는 Google 지도 조정을 실행하는 적절한 기능을 논의하여 이 문제에 대한 해결책을 제공하는 것을 목표로 합니다.

타일은 왜 사라지나요?

" mapwrap" div를 사용하면 Google 지도가 새 크기에 자동으로 조정되지 않습니다. 이로 인해 지도 크기와 표시 영역이 일치하지 않아 타일이 사라지게 됩니다.

해결책

이 문제를 해결하려면 크기 조정 이벤트를 명시적으로 트리거해야 합니다. Google 지도 개체에 이는 지도가 레이아웃을 다시 계산하고 "mapwrap" div의 새로운 크기에 맞게 조정하도록 지시합니다.

Google 지도 v3의 경우 다음 함수를 사용하세요.

google.maps.event.trigger(map, "resize");

데모

이 개념을 명확히 하기 위해 jQuery를 사용한 데모가 있습니다.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // Listen for the window resize event and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

이 예에서는 창 크기가 조정될 때마다 "map-canvas" div 내의 Google 지도가 자동으로 새 크기에 맞게 조정되어 타일이 사라지는 것을 방지합니다.