Google Maps API v3返回灰色塊

Question

我是新手，這是我的第一篇文章-請原諒任何協議/格式違規或查詢的簡單性-在其他地方找不到最終的解決方案。

問題我正在嘗試繪制很少成功的地圖-我得到的只是灰色框。 代碼來自Google API資源頁面和John Duckett的“ JavaScript＆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);

編輯

我忘了再提一個錯別字（中心應該是中心）：

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 個解決方案

解決方案1
4 已采納 2015-07-06 10:02:24

編輯

Google Maps API v3返回灰色塊

問題描述

1 個解決方案

解決方案1 4 已采納 2015-07-06 10:02:24

編輯

解決方案1
4 已采納 2015-07-06 10:02:24