[英]Uncaught ReferenceError: google is not defined when placing pins
我不斷收到未定義的谷歌。 只有當我嘗試將圖釘放在地圖上時才會發生這種情況。 地圖顯示正常,沒有錯誤,直到我在 initMap() 函數之后添加所有行。 我看過類似的帖子,但沒有一個答案解決了我的問題。 感謝您提前提供任何建議
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maps.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPduELA=" crossorigin="anonymous"></script>
<script type="text/javascript" src="maps.js"></script>
<title>Dr Office Data</title>
</head>
<body>
<div class="pageContainer">
<div id="map"></div>
</div>
<div class="sortContainer">
<button type="button" name="button">Click to Show Summary Markers</button>
<div class="stateDropdown">
<label for="stateList">Select a State</label>
<select class="" name="states">
<option value="ALL">All</option>
<option value="AL">Alabama</option>
<option value="CO">Colorado</option>
<option value="MS">Mississippi</option>
</select>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"
async defer></script>
</body>
</html>
```
var markerData = [["FIRST","LAST","ADDRESS","PHONE",39.6387797,-104.8007541],["FIRST","LAST","ADDRESS","PHONE",39.6125868,-105.1377128],["FIRST","LAST","ADDRESS","PHONE",30.6940368,-88.0945316]]
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891)
});
}
var infowindow = new google.maps.InfoWindow;
var marker, i;
for (i = 0; i < markerData.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markerData[i][4], markerData[i][5]),
map: map
});;
}
```
就像 Geocodezip 所說的,您的地圖相關代碼需要放置在回調函數中,以確保在執行代碼之前已加載 API。 試試這個工作 jsfiddle 。 完整代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Dr Office Data</title>
</head>
<body>
<div class="pageContainer">
<div id="map" style="height:400px;width:400px;"></div>
</div>
<div class="sortContainer">
<button type="button" name="button">Click to Show Summary Markers</button>
<div class="stateDropdown">
<label for="stateList">Select a State</label>
<select class="" name="states">
<option value="ALL">All</option>
<option value="AL">Alabama</option>
<option value="CO">Colorado</option>
<option value="MS">Mississippi</option>
</select>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<script>
var markerData = [
["FIRST", "LAST", "ADDRESS", "PHONE", 39.6387797, -104.8007541],
["FIRST", "LAST", "ADDRESS", "PHONE", 39.6125868, -105.1377128],
["FIRST", "LAST", "ADDRESS", "PHONE", 30.6940368, -88.0945316]
];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891)
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < markerData.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markerData[i][4], markerData[i][5]),
map: map
});
}
}
</script>
</body>
</html>
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.