Getting GMaps fully responsive with just CSS is quite a hassle. So I built a simple solution in JavaScript only. This one uses jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); resizeMap(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); function resizeMap(){ var h = window.innerHeight; var w = window.innerWidth; $("#map_canvas").width(w/2); $("#map_canvas").height(h-50); } |