Jquery 谷歌地图没有出现在页面中

我是谷歌地图API新手，请指导我。当我把这段代码放到HTML中时，地图并没有出现在我的页面中。我什么也看不见

如何解决这个问题

我有以下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>

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

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我的HTML+CSS代码：

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

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

#地图画布{
宽度：80%；
身高：80%；
边际：0px；
填充：0px
}
#面板{
位置：绝对位置；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
开始：
完:

以下链接将对您有所帮助

• 这是一个关于如何使用

  googlemap

  v3工具的好例子

---

您还必须为整个页面添加样式。比如：

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

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

html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{
...

---

不知怎的，它不知道把地图放在哪里。
发布你的日志猫，看看这个演示：和Ref：这很奇怪。我用Chrome、IE10和FF试用过。你使用哪种浏览器？好的，现在正在工作：）但现在我正在WordPress中实现，但在header.php文件中它不工作。