0

Zurb Foundation ページでバージョン 3 API を使用して動的な Google マップを生成しました。マップは完全に機能し、マップが応答しないことを除いて、すべてが良好です。

php API呼び出しを使用してページの読み込み時にマーカーと情報ウィンドウのデータを取得しているため、iframeソリューションを使用できないことに注意してください。

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>
4

1 に答える 1

0

単純な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();

于 2013-06-08T15:51:56.027 に答える