Javascript 谷歌地图错误-不显示地图

我试图让谷歌地图工作，但第一个地图不会加载，现在有一个谷歌文件上的错误

类型错误：%20a%20为%20null%20http://maps.gstatic.com/intl/pt_ALL/mapfiles/api-3/17/2/main.js%20Line%2040

这是我的代码：

<div id="map_canvas" style="width: 100%; height: 100%"></div>
<script>
var map;
var zoom=5;
var center = new google.maps.LatLng(36.6, 0);

    function initialize() {
        var mapOptions = {
                zoom: zoom,
                center: center,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                minZoom: zoom
            };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

var映射；
var=5；
var center=newgoogle.maps.LatLng（36.6,0）；
函数初始化（）{
变量映射选项={
缩放：缩放，
中心:中心,，
mapTypeId:google.maps.mapTypeId.HYBRID，
最小缩放：缩放
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

首先我得到了关键参数，然后我把它取下来，因为它没有显示出来。我还收到了一些关于谷歌地图被禁用的提示弹出窗口，让我阅读谷歌地图的条款和条件，我这样做了，并发现我的网站符合谷歌地图的现行条款（用户无需支付任何费用即可登录网站）

我将非常感谢在这个问题上提供的任何帮助。

---

谢谢。

首先，div id是

map\u canvas

，但您在js代码中使用的是

map canvas

。 第二，尝试用像素来表示尺寸，而不是百分比，即

width:400px；高度：400px

演示：

CSS:

JS:

演示不存在@AmirHosseinMehrvarzi JSFIDLE似乎已经移除了旧小提琴。无论如何，答案中仍然存在相关代码。您可以在编辑器中尝试并检查它。
#map_canvas {
     width:500px;
     height:500px;
 }

var map;
var zoom = 5;
var center = new google.maps.LatLng(36.6, 0);

function initialize() {
    var mapOptions = {
        zoom: zoom,
        center: center,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        minZoom: zoom
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);