zurb Foundation 3中的响应式谷歌地图答案

【问题标题】：Responsive google map in zurb foundation 3zurb Foundation 3中的响应式谷歌地图
【发布时间】：2013-06-02 03:54:16
【问题描述】：

我在 Zurb 基金会页面上有一个使用版本 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>

【问题讨论】：

标签： php javascript css google-maps-api-3 zurb-foundation

【解决方案1】：

好的，用一个简单的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();

【讨论】：