相关疑难解决方法(0)

我正在尝试让谷歌地图响应并调整大小,同时在Windows调整大小时保持其中心.我读了其他堆栈问题,例如:

响应式谷歌地图？和中心谷歌地图(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%; }

我正在寻找一种快速简便的方法,将谷歌地图(通过其嵌入代码)嵌入到响应式网站中,并将响应性应用于地图.

一般情况下,iframe会拒绝调整您的媒体查询或其中包含的div,这总是使我感到沮丧,我讨厌使用插件,如果真的不需要,如响应式谷歌地图插件.请参阅下面的解决方案