Отзывчивая карта google в zurb foundation 3

Question

У меня есть динамическая карта google, сгенерированная с использованием API версии 3 на странице Zurb Foundation. Карта отлично работает, и все хорошо. КРОМЕ, карта не реагирует.

Обратите внимание, что я не могу использовать решение 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> 

Answer 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();