Question

我是新手＆amp;这是我的第一篇文章 - 请原谅任何协议/格式化违规行为或我查询的简单性 - 我无法在其他地方找到确凿的解决方案。

问题我试图绘制一张没有成功的地图 - 我得到的只是灰色框。代码来源于Google API资源页面和John Duckett的“JavaScript＆amp; Jquery的”。

怀疑原因 我怀疑它与API密钥有关，因为我发现Google Developer上的API指标没有变化 - 但是，我在Chrome控制台中也没有看到任何错误。

感谢任何帮助 - 以及您如何确定问题 - 谢谢！

代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>HR Sightings Page</title>
        <link href='css/styles.css' type="text/css" rel="stylesheet" />
    </head>

    <body>
        <div id="map-canvas"></div>

        <script type="text/javascript" src="js/google-map.js"></script>
    </body>
</html>

CSS - 'css / styles.css'

#map-canvas { 
    height: 500px; 
    margin: 0; 
    padding: 0;
}

JavaScript - 'js / google-map.js'

{//Initialisation function to set up map
function init() {           
    var mapOptions = {                                                                  //Setup the map options
        centre: new google.maps.LatLng(-24.939602, 31.578375),                          //specify map centre
        mapTypeId: google.maps.MapTypeId.SATELLITE,                                     //specify map type
        zoom: 8                                                                         //set default zoom
    };
    var venueMap;
    venueMap = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);   //draw the map
}

//Asyncronously load Google Maps api script once page is loaded
function loadScript() {
    var script = document.createElement('script');                                      //create <script> element
    script.type = 'text/JavaScript'
    script.src = 'http://maps.googleapis.com/maps/api/js?' + 
                    'key=AIzaSyBT5V-qRuEsNge9UDKsun74-Lf330Xlj7I&'+
                    'sensor=false&callback=init';                               
    document.body.appendChild(script);                                                  //add element to the page
}

//load the script
window.onload = loadScript;}

Answer 1

你的代码中有拼写错误（括号错误），更改：

venueMap = new google.maps.Map(document.getElementById('map-canvas',mapOptions));

到：

venueMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

修改

我忘记了另外一个错字（ center 应该 center ）：

centre: new google.maps.LatLng(-24.939602, 31.578375),

应该是：

center: new google.maps.LatLng(-24.939602, 31.578375),

工作示例：http://js.do/nowa/62248

Google Maps API v3返回灰色块

1 个答案:

修改