Question

我已将Google云端硬盘中的表格嵌入到Google地图的信息窗口中。我已经能够调整infowindow本身的大小，但不能调整嵌入式表的大小。我已经尝试了各种各样的我想到的，但是在添加宽度后地图将不会加载。关于为什么这可能不起作用的任何想法？

我在http://www.amvendetti.com/index.php?id=2

有一个例子

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
    <script>

function initialize() {
  var myLatlng = new google.maps.LatLng(39.996723, -101.735273);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content" style="height:400px;width:700px;">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">United States</h1>'+
      '<div id="bodyContent">'+
      '<iframe src="https://docs.google.com/spreadsheets/d/1XRkm-_6L1sKQiqmWyEY37BtIKEyEjpyfe26NzH6RXNo/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>'
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString    
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'United States'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

文档在单独的i框架中加载，您需要将iframe中的高度和宽度放在其外部div上。

http://jsbin.com/boweyayodage/1/

或者如果你想这样做动态使用jquery来挖掘iframe并在你的点击事件中更改它的css属性。

无法调整地图infowindow中嵌入的Google电子表格的大小

1 个答案: