Google지도 반응 형 크기 조정

Google지도 반응 형 크기 조정

---

Windows 크기가 조정될 때 중앙을 유지하면서 Google지도가 응답하고 크기를 조정하려고합니다. 다음과 같은 다른 스택 질문을 읽었습니다.

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

두 번째 스택 질문 에서 코드의 일부로 나를 도와주는 링크가 있지만 여전히 운이 없습니다. 이것은 내가 사용하는 코드입니다. 창 크기를 조정할 때지도 크기가 전혀 조정되지 않습니다.

    function initialize() {
      var mapOptions = {
       center: new google.maps.LatLng(40.5472,12.282715),
       zoom: 6,
       mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, "resize", function() {
     var center = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(center); 
    });

HTML

 <div id="map-canvas"/>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }

---

이벤트 리스너가 사용할 수있는 범위로 맵 변수를 이동하십시오. initialize () 함수 내에서지도를 만들고 있으며 그런 방식으로 만들면 다른 어떤 것도 사용할 수 없습니다.

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

참조 URL : https://stackoverflow.com/questions/18444161/google-maps-responsive-resize