Responsive Google Map?

Question

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.

Answer 1

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>