讓我的谷歌地圖的響應是一個div

Question

我添加了一個谷歌地圖到我的網站的時候，我用這個漂亮的新的，我用這個腳本添加：

<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script> 
     function writeAddressName(latLng) { 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
      "location": latLng 
     }, 
     function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) 
      document.getElementById("address").innerHTML = results[0].formatted_address; 
      else 
      document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />"; 
     }); 
     } 

     function geolocationSuccess(position) { 
     var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     // Write the formatted address 
     writeAddressName(userLatLng); 

     var myOptions = { 
      zoom : 16, 
      center : userLatLng, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 
     // Draw the map 
     var mapObject = new google.maps.Map(document.getElementById("map"), myOptions); 
     // Place the marker 
     new google.maps.Marker({ 
      map: mapObject, 
      position: userLatLng 
     }); 
     // Draw a circle around the user position to have an idea of the current localization accuracy 
     var circle = new google.maps.Circle({ 
      center: userLatLng, 
      radius: position.coords.accuracy, 
      map: mapObject, 
      fillColor: '#0000FF', 
      fillOpacity: 0.5, 
      strokeColor: '#0000FF', 
      strokeOpacity: 1.0 
     }); 
     mapObject.fitBounds(circle.getBounds()); 
     } 

     function geolocationError(positionError) { 
     document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />"; 
     } 

     function geolocateUser() { 
     // If the browser supports the Geolocation API 
     if (navigator.geolocation) 
     { 
      var positionOptions = { 
      enableHighAccuracy: true, 
      timeout: 10 * 1000 // 10 seconds 
      }; 
      navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions); 
     } 
     else 
      document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API"; 
     } 

     window.onload = geolocateUser; 
    </script> 
    <style type="text/css"> 
     #map { 
     width: 625px; 
     height: 500px; 
     } 
     .google-maps { 
     position: relative; 
     padding-bottom: 75%; // This is the aspect ratio 
     height: 0; 
     overflow: hidden; 
} 
    </style> 

和這裏的在這裏我使用的div：

<div class='container-map'> 
    <h3>Farmacias cercanas a ti</h3> 
    <p><b>Address</b>: <span id="address"></span></p> 

    <div id='map' class="google-maps"></div> 
    <p id="error"></p> 
    <button type="submit" class="btn btn-danger">Submit</button> 
</div> 

我已經看到了很多的響應iframe的內嵌谷歌地圖的例子，但在一個div時找不到做出響應地圖的方式......

---

FILES

Here are the files of a demo, the map is in the payment section

Answer 1

您可以修改下面的CSS：

.container-map{ 
     width:625px; 
} 
#map{ 
    width:100%; /* if not working, use !important*/ 
} 

Answer 2

這爲我在過去的工作中的溶液如下

#map { 
     width:100%; 
     height:calc(100% - 0px); 
}