如何使Google地图响应？

问题描述

我尝试将谷歌地图添加到网页，但它具有固定的宽度和高度，使用Google教程代码。
我的HTML头是这样的：

 < script src =https：//maps.googleapis。 COM / / API / JS>地图;< /脚本> 
< script> 
函数initialize（）{
 var mapCanvas = document.getElementById（'map'）; 
 var myLatLng = {lat：51.434408，lng：-2.53531}; 
 var mapOptions = {
 center：new google.maps.LatLng（51.434408，-2.53531），
 zoom：15，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 var map = new google.maps.Map（mapCanvas，mapOptions）; 
 var marker = new google.maps.Marker（{
 position：myLatLng，
 map：map，
 title：'Hello Wold'
}）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  

正文中的HTML是：

 < div id =map>< / div> 
  

相关的CSS是这样的：

  #map {
 width：1140px; 
 height：300px; 
} 
  

我使用bootstraps列方法进行布局并使页面响应大小我希望地图占用它所在行的所有12列。任何想法？

谢谢！

因此，我找到了解决我的问题的方法。这是我修改过的CSS：

  #map {
 width：100％; 
 height：300px; 
} 
  

我发现你必须有一定数量的像素高度，使用100％或其他百分比会使地图消失，但宽度为100％会使地图响应调整浏览器大小。 HTML保持不变。

I am trying to add Google Maps to a web page, however it has a fixed width and height, from the code using Googles tutorial.My HTML in the head is this:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapCanvas = document.getElementById('map');
        var myLatLng = {lat: 51.434408, lng: -2.53531};
        var mapOptions = {
            center: new google.maps.LatLng(51.434408, -2.53531),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello Wold'
});
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The HTML in the body is this:

<div id="map"></div>

The CSS thats related is this:

#map {
width: 1140px;
height: 300px;
}

I am using bootstraps column method to layout and make my page responsive, at all sizes I would like the map to take up all 12 columns of the row that it is in. Any ideas?

Thanks!

解决方案

So, I found a solution to my question. Here is my revised CSS:

#map {
width: 100%;
height: 300px;
}

I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.

这篇关于如何使Google地图响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！