title: Set width and height to responsive Google Map?
body: <p>To be able to view the Google Maps, I have to set the height to a pixel value. I can set the width to 100% and it's almost responsive, but not to the height. I thought I could set different values to the height depending on different media queires, but that doesn't work. Any ideas how this can be solved. I just want a smaller height when it's on mobile and a bigger map on desktop.</p>
  
  <p>The CSS I use:</p>
  
  <pre><code>#map-canvas
  {
  width: 100%;
  height: 200px;
  }
  </code></pre>