未捕獲的ReferenceError：谷歌沒有定義

我試圖在標記從GeoJSON的文件加載到我的地圖，地圖加載罰款，但不斷收到錯誤...未捕獲的ReferenceError：谷歌沒有定義

Uncaught ReferenceError: google is not defined

在這條線...

google.maps.event.addDomListener(window, 'load', initialize);

我讀過這a few其他問題，而且大部分對付你需要怎樣包括谷歌地圖代碼之前映射腳本。我已經嘗試將它包含在我的頭部和地圖容器的正上方，但沒有運氣。地圖本身實際上是加載的，只是來自我的JSON文件的標記沒有。

HTML/JS代碼

<!DOCTYPE html> 
<html> 
<head> 
    <title>Game Industry Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link rel=StyleSheet href="css/style.css" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div class="navbar navbar-defualt navbar-fixed-top"> 
    <a class="navbar-brand" href="#">Game Industry Map</a> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value=""> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button> 
     </div> 
    </div> 
</div> 
<div class='content-container'> 
    <div id="map"></div> 
    <div id="company-info"> 
     <!--To do...--> 
    </div> 
</div> 
<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap" 
     type="text/javascript"></script> 
</body> 
<footer>Created by <a href="#">My Name</a>.</footer> 
</html>

GeoJSON的文件

{ "type": "FeatureCollection", 
    "features": [ 
    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]}, 
     "properties": { 
     "company-logo": "images/activision.png", 
     "company-name": "Activision Publishing Inc", 
     } 
    }, 

    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]}, 
     "properties": { 
     "company-logo": "images/naughtydog.png", 
     "company-name": "Naughty Dog Inc", 
     } 
    } 
    ] 
}

來源

2016-03-28 Carson

可能重複的[（搜索選項不工作）未捕獲ReferenceError：谷歌未定義]（http://stackoverflow.com/questions/35909352/search-option-not-working-uncaught-referenceerror-google-is-未定義） – geocodezip

嘗試包括谷歌圖書館的腳本調用庫前：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap" 
    type="text/javascript"></script> 

<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

編輯

您正在定義一個回調：/maps/api/js?key=API_KEY_HERE&callback=initMap

這將稱爲您的initMap()方法一旦谷歌地圖已加載所有組件。

但是您在此函數之外調用google.maps.event.addDomListener(window, 'load', initialize);，因此，google尚未加載。

您應該嘗試在您的initMap()呼叫中包含您的addDomListener呼叫！

來源

2016-03-28 17:14:00 cl3m

在google api文檔中，他們在底部有腳本標記：https：//developers.google.com/maps/documentation/javascript/examples/map-simple – JordanHendrix

我已經嘗試過了，但不幸的是didn'工作。地圖本身加載任何一種方式，只是不管標記在哪裏，無論我包括圖書館在內。 – Carson

對不起，這是因爲你正在調用initMap（）作爲回調函數，而'google.maps.event.addDomListener（window，'load'，initialize）;'不在initMap（）函數中，所以google還沒有定義當你叫它 – cl3m

你接近，首先你需要添加使用google.maps.event.addListerner()監聽器，那麼你就需要使用google.maps.events.addDomListner()

addListener是異步監聽器添加到DOM，所以你需要將它與一個回調寫。這裏有一個例子：

<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

function initialize() 
{ 
var mapProp = { 
    center: myCenter, 
    zoom:5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker = new google.maps.Marker({ 
    position: myCenter, 
    title:'Click to zoom' 
    }); 

marker.setMap(map); 

// Zoom to 9 when clicking on marker 
google.maps.event.addListener(marker,'click',function() { 
    map.setZoom(9); 
    map.setCenter(marker.getPosition()); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

來源

2016-03-28 17:28:39 JordanHendrix

事實上，你可以只寫：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

（沒有回調）。 API_KEY也不是必需的。在公開的Maps JavaScript API應用程序中，強烈建議您將引薦來源限制添加到生產系統中使用的任何關鍵字，特別是面向公衆的關鍵字，並且只對您的應用程序的域，主機甚至完整文件URL進行授權。

來源

2018-01-24 05:20:59 loveJS

未捕獲的ReferenceError：谷歌沒有定義

回答

相關問題