브라우저 크기 조정 (반응 형)의 중앙 Google지도 (V3)

내 페이지에 100 % 페이지 너비로 Google지도 (V3)가 있고 가운데에 마커가 하나 있습니다. 브라우저 창 너비의 크기를 조정할 때지도가 중앙 (반응 형)으로 유지되기를 원합니다. 이제지도는 페이지의 왼쪽에 유지되고 작아집니다.

업데이트 duncan 덕분에 설명 된대로 정확하게 작동하게되었습니다. 이것은 최종 코드입니다.

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

창 크기가 조정될 때 이벤트 리스너가 있어야합니다. 이것은 나를 위해 일했습니다 (초기화 기능에 넣으십시오).

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

브라우저 크기 조정 이벤트를 감지하고 중심점을 유지하면서 Google지도의 크기를 조정합니다.

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

다른 방법 (예 : jQuery-UI '크기 조정 가능'컨트롤 사용)을 통해 Google지도의 크기를 조정할 때 다른 이벤트 핸들러에서 동일한 코드를 사용할 수 있습니다.

출처 : http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ 링크에 대한 @smftre의 크레딧 .

참고 :이 코드는 수락 된 답변에 대한 @smftre의 의견에 링크되었습니다. 받아 들여지는 답변보다 실제로 우수하기 때문에 자체 답변으로 추가 할 가치가 있다고 생각합니다. 중심점을 추적하기위한 전역 변수와 해당 변수를 업데이트하기위한 이벤트 핸들러가 필요하지 않습니다.

w3schools.com의 좋은 예. 나는 다음을 사용했고 훌륭하게 작동합니다.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

html : 선택한 ID로 div 만들기

<div id="map"></div>

Node.js :지도를 만들고 방금 만든 div에 연결합니다.

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

창 크기를 조정할 때 가운데

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

위의 솔루션을 es6로 업데이트했습니다.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));