响应式谷歌地图在zurb基础3
Responsive google map in zurb foundation 3
我在Zurb Foundation页面上使用第3版API生成了一个动态谷歌地图。地图工作完美,一切都很好,除了地图没有响应。
请注意,我不能使用iframe解决方案,因为我正在使用php api调用获取页面加载上的标记和信息窗口数据。
如何使用zurb foundation 3使此地图响应访问者的视口?
我使用PHP动态打印生成地图的javascript函数。函数如下:
public function printgoogle(){
//Irrelevant code
$jsarr = array();
$jsarr = json_encode($phparray);
print "<script>";
print "function initialize(){";
print "var mapProp = {";
print "center:new google.maps.LatLng(".$this->centerlat.",".$this->centerlng."),";
print "zoom:".$this->mainzoom.",";
print "mapTypeId:google.maps.MapTypeId.ROADMAP";
print "};";
print "var map=new google.maps.Map(document.getElementById('"map-canvas'"),mapProp);";
print "var infowindow = new google.maps.InfoWindow();";
print "var locations = $jsarr;";
print "var marker, i;";
print "for (i = 0; i < locations.length; i++) {";
print "marker = new google.maps.Marker({";
print "position: new google.maps.LatLng(locations[i][1], locations[i][2]),";
print "map: map";
print "});";
print "google.maps.event.addListener(marker, 'click', (function(marker, i) {";
print "return function() {";
print "infowindow.setContent(locations[i][0]);";
print "var pos = marker.getPosition();";
print "infowindow.setPosition(pos);";
print "infowindow.open(map, marker);";
print "}";
print "})(marker, i));";
print "}";
print "}";
print "google.maps.event.addDomListener(window, 'load', initialize);";
print "</script>";
}
HTML
<div class="row" id="2a1">
<div class="twelve columns" id="2a1a">
<div id="map-canvas"></div>
</div>
</div>
ok使用一个简单的jquery函数解决了这个问题
0.3和0.1是我需要的值。它们可以被任何东西代替,如果有人想要全屏地图,可以跳过。
希望这能帮助到一些人。
<script type="text/javascript">
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var nheight = (height - (0.1 * height))+'px';
var nwidth = (width - (0.3 * width))+'px';
$('#map-canvas').css({
width: nwidth,
height: nheight
});
}).resize();
相关文章:
- zurb基础中的固定宽度立柱3
- 如何在大型nodeJS代码的基础上逐步引入typescript
- 引导程序/基础堆叠行/列
- 基础6未关闭
- Zurb基金会's javascript不工作
- Zurb基础滑块-绝对位置问题
- Rails 替换 confirm with Zurb 基础模态 - Uncatch TypeError: confirm
- 基础zurb导航栏
- 动态html和javascript中的Zurb基础手风琴
- 使用jquery懒惰加载插件与ZURB基础数据交换
- Zurb基础5.4 joyride - control暴露盖
- 响应式谷歌地图在zurb基础3
- Zurb基础4节&jQuery的效果
- 下拉列表发布ZURB基础
- 如何提交数组数据到bootstrap/zurb基础模态
- Zurb基础轨道滑块定制
- 基础 6 麦哲伦粘性不适用于 Zurb 模板 cli 安装
- Zurb基础模态与ajax (rails)
- 设置定价表相同的高度zurb基础
- JQuery手风琴问题在Zurb基础