Javascript 让我的谷歌地图在div中响应

我已经在我的网站上添加了一个谷歌地图，我很新使用它，我用这个脚本添加它：

    <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>

函数writedDressName（latLng）{
var geocoder=new google.maps.geocoder（）；
地理编码({
“位置”：latLng
},
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）
document.getElementById（“地址”）.innerHTML=results[0]。格式化的\u地址；
其他的
document.getElementById（“错误”）.innerHTML+=“无法检索您的地址”+”
”；
});
}
功能地理定位成功（职位）{
var userLatLng=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
//写格式化的地址
writeAddressName（userLatLng）；
变量myOptions={
缩放：16，
中心：userLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//画地图
var mapObject=new google.maps.Map（document.getElementById（“Map”），myOptions）；
//放置标记
新的google.maps.Marker({
map:mapObject，
职位：userLatLng
});
//围绕用户位置画一个圆圈，了解当前定位精度
var circle=new google.maps.circle({
中心：userLatLng，
半径：位置、坐标、精度，
map:mapObject，
填充颜色：“#0000FF”，
填充不透明度：0.5，
strokeColor:“#0000FF”，
笔划不透明度：1.0
});
fitBounds（circle.getBounds（））；
}
函数地理位置错误（位置错误）{
document.getElementById（“error”）.innerHTML+=“error:”+positionError.message+“
”；
}
函数geolocateUser（）{
//如果浏览器支持地理定位API
if（导航器.地理位置）
{
变量位置选项={
EnableHighAccurance:正确，
超时：10*1000//10秒
};
navigator.geolocation.getCurrentPosition（geolocationSuccess、geolocationError、positionOptions）；
}
其他的
document.getElementById（“错误”）.innerHTML+=“您的浏览器不支持地理位置API”；
}
window.onload=地理位置用户；
#地图{
宽度：625px；
高度：500px；
}
.谷歌地图{
位置：相对位置；
填充底部：75%；//这是纵横比
身高：0；
溢出：隐藏；
}

这是我使用它的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嵌入谷歌地图的例子，但是找不到在分区中制作响应地图的方法

---

文件

---

您可以修改以下css：

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

---

过去对我有效的解决方案如下

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

---

你能在上面创建一个演示吗？我会上传文件好的，为什么要使用谷歌地图css，这对你有什么作用？如果我不添加css，地图就不会出现