设置响应式Google地图的宽度和高度？

Question

为了能够查看Google地图，我必须将高度设置为像素值。我可以将宽度设置为100％，它几乎响应，但不是高度。我认为我可以根据不同的媒体队列设置不同的高度值，但这不起作用。任何想法如何解决这个问题。我只想在移动设备上使用更小的高度，在桌面上放置更大的地图。

我使用的CSS：

#map-canvas
{
width: 100%;
height: 200px;
}

Answer 1

媒体查询效果很好。

look here

尝试使用里面的地图重新调整窗口大小。

Answer 2

你可以使用java Script或jQuery 像这样

var wi = window.innerWidth;
var he = window.innerHeight;
$('#map-canvas').css('width',wi+'px');
$('#map-canvas').css('height',he+'px');