jquery - Google map 未出现在页面中

Question

我是 Google Map API 新手，请指导我。当我将此代码放入 HTML map 时， map 没有出现在我的页面中。我什么也看不见。

如何解决此问题。

我有这个 JavaScript 代码:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: chicago
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
    }

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);       
</script>

我的 HTML + CSS 代码:

<style type="text/css">
    #map-canvas {
        width: 80%;
        height: 80%;
        margin: 0px;
        padding: 0px
    }
    #panel {
        position: absolute;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
    }
</style>

<div id="panel"> <b>Start: </b>
    <input type="text" name="start" id="start" onchange="calcRoute();">
<b>End: </b>
    <input type="text" name="end" id="end" onchange="calcRoute();">
</div>
<div id="map-canvas"></div>

Answer 1

您还必须为整个页面添加样式。像这样的东西:

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }

    #map-canvas {
    ...
</style>

不知怎的，它不知道把你的 map 放在哪里。