可以't调整嵌入地图信息窗口的谷歌电子表格的大小

Can't resize Google Spreadsheet embedded in Maps infowindow

本文关键字：窗口 信息窗 谷歌 电子表格 信息 地图 调整 可以      更新时间：2023-09-26

我已经将Google Drive中的一个表嵌入到我的Google Map的信息窗口中。我已经能够调整信息窗口本身的大小，但不能调整嵌入表的大小。我试过了，我能想到的各种各样的，但在添加宽度后，地图不会加载。关于为什么这可能不起作用，有什么想法吗？

我有一个例子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>

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

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

或者，如果您想动态执行，请使用jquery来挖掘iframe，并在单击事件中更改其css属性。

相关文章：