响应式谷歌地图在zurb基础3

Responsive google map in zurb foundation 3

本文关键字：基础 zurb 谷歌地图响应更新时间：2023-09-26

我在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();