如何从代码中创建响应式google地图
<div class="map">
<iframe>...</iframe>
</div>我在css中使用完整的地图
.map{max-width:100%;}和小型设备
.map{max-width:40%;}但它并没有起作用。
有谁知道吗？谢谢。
回答 13
Stack Overflow用户
发布于 2013-03-30 13:18:21
将此代码添加到初始化函数中：
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
</script>Stack Overflow用户
发布于 2013-05-28 06:19:31
将100%添加到其iframe的width和height属性中对我来说一直都很有效。例如
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=surat&ie=UTF8&hq=&hnear=Surat,+Gujarat&ll=21.195,72.819444&spn=0.36299,0.676346&t=m&z=11&output=embed"></iframe><br />Stack Overflow用户
发布于 2014-03-26 11:10:35
没有javascript的解决方案：
HTML：
<div class="google-maps">
<iframe>........//Google Maps Code//..........</iframe>
</div>CSS：
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}如果你有一个自定义的地图大小，删除“高度: 100%！重要”
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15421369
复制相关文章
腾讯云开发者
