Question

我知道有很多帖子都有相同的标题，我尽可能多地经历了这些帖子。基本上，我试图在div中显示一个谷歌地图，其高度和宽度我设置为100％，但地图没有显示。我尝试将<html>和<body>的高度和宽度设置为100％，但地图仍未显示。我的相关代码如下：

<body>
    <div class="section">
        <div class="container">
            <div id="map" style="width: 100%; height: 100%; position: absolute;">
                <div id="map-canvas"></div>
            </div>
            <div class="well">               
                <div class="panel-group" id="Accordion"></div>
            </div>
        </div>
    </div>

...

<script>

    var spinner = new Spinner();
    $(document).ready(function(){

        var place = JSON.parse(localStorage.getItem("selectedplace"));
        console.log(place);
        if (place == null){ 
            ...
        }else{   
            google.maps.event.addDomListener(window,'load',loadMap);     
            getQueuesAtPlace(place["id"]);
        }
    });
</script>

JavaScript的：

function loadMap() {

    var source = JSON.parse(localStorage.getItem("currentplace"));
    var destination = JSON.parse(localStorage.getItem("selectedplace"));

    var lat = destination['latitude'];
    var long = destination['longitude'];
    var mapOptions = {
        center: new google.maps.LatLng(parseFloat(lat), parseFloat(long)),
        zoom: 8
        //mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    console.log("CENTER: " + mapOptions.center);
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker=new google.maps.Marker({
        position: new google.maps.LatLng(parseFloat(lat),parseFloat(long)),
        map: map,
        title: 'Office location'
    });

}

代码的JS部分主要是复制粘贴，所以我认为错误在于div的定位/风格。理想情况下，我希望将地图放在<well>标记内，但它不会显示在任何地方。有谁可以指出错误？

Answer 1

为ID为 map-canvas 的元素添加固定高度，以查看其是否正常工作

尽管将父级div宽度和高度设置为100％，但Google地图仍未显示

1 个答案: