Responsive google map in zurb foundation 3 - php

Question

I have a dynamic google map generated using the version 3 API on a Zurb Foundation page. The map works perfectly and everything is all good EXCEPT, the map is not responsive.
Please note, that I cannot use the iframe solution because I am getting the markers and infowindow data on page load using a php api call.
How can I make this map responsive to the visitor's viewport using zurb foundation 3 ?
I use PHP to dynamically print the javascript function to generate the map. Here is the function.
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>";
}
Here is the HTML
<div class="row" id="2a1">
<div class="twelve columns" id="2a1a">
<div id="map-canvas"></div>
</div>
</div>

Answer 1

ok solved it using a simple jquery function
0.3 and 0.1 are the values which I needed. They can be substituted with anything and can be skipped if someone wants a full screen map.
Hope this helps someone.
<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();