Responsive Google Map?

google-maps, responsive-design

Solution

Add this to your initialize function:

<script type="text/javascript">

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
  });

}

</script>

Problem

How to make a responsive google map from the code ``` <div class="map"> <iframe>...</iframe> </div> ``` I use in css for full map ``` .map{max-width:100%;} ``` and small device ``` .map{max-width:40%;} ``` but it didn't work. Anyone have idea? Thank you.

Original source

Related problems