Google未定義錯誤
[英]Google not defined error
問題描述
我正在使用Google Maps API制作網頁，但出現“未定義Google錯誤”
我該如何擺脫呢？
如何導入Google或做些什么使這段代碼起作用？
我想要一個程序，用戶可以在其中輸入位置並在其中顯示標記。 但它不能正常工作。
這是我的代碼：
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <h1>Perform Google Maps Search</h1> <h3> Please enter the place you want to search</h3> <input type="text" id="mapsearch" size="50"> <br> <br> <div id="map"></div> <script> var map; function initMap() { var myOptions = { zoom:14, navigationControl: true, scaleControl: true, panControl: true, center: new google.maps.LatLng(43.6532,-79.3832), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map'),myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(43.6532,-79.3832), title:"Toronto" }); marker.setMap(map); } var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch')); map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('mapsearch')); google.maps.event.addListener(searchBox, 'places_changed', function() { searchBox.set('map', null); var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { (function(place) { var marker = new google.maps.Marker({ position: place.geometry.location }); marker.bindTo('map', searchBox, 'map'); google.maps.event.addListener(marker, 'map_changed', function() { if (!this.getMap()) { this.unbindAll(); } }); bounds.extend(place.geometry.location); }(place)); } map.fitBounds(bounds); searchBox.set('map', map); map.setZoom(Math.min(map.getZoom(),12)); }); google.maps.event.addDomListener(window, 'load', init); </script> <script src="https://maps.googleapis.com/maps/api/js?key="Your_API_Key"&callback=initMap" async defer></script> </body> </html>
2 個解決方案
解決方案1
0 2018-02-19 04:20:22
當您的腳本需要它們時，很可能您的Google API尚未加載-因此出現了“未定義Google錯誤”。 將其移到腳本之前，然后放下異步延遲-或將腳本放入“ $（document）.ready”中
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtaKPvRV8-ciYtnnzG3QI3CO7m4HJyhaI&callback=initMap"
async defer></script>
解決方案2
0 已采納 2018-02-19 04:45:00
您必須先關閉initMap函數，然后再關閉它，然后var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
因此，您將收到google undefined錯誤。
此外，您還向Google地圖腳本src添加了參數&libraries=places
工作實例
https://plnkr.co/edit/ngtGvuhDDZAnovwPnPXh?p=preview
// Code goes here var map; function initMap() { var myOptions = { zoom:14, navigationControl: true, scaleControl: true, panControl: true, center: new google.maps.LatLng(43.6532,-79.3832), mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map'),myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(43.6532,-79.3832), title:"Toronto" }); marker.setMap(map); var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch')); map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('mapsearch')); google.maps.event.addListener(searchBox, 'places_changed', function() { searchBox.set('map', null); var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for (i = 0; place = places[i]; i++) { (function(place) { var marker = new google.maps.Marker({ position: place.geometry.location }); marker.bindTo('map', searchBox, 'map'); google.maps.event.addListener(marker, 'map_changed', function() { if (!this.getMap()) { this.unbindAll(); } }); bounds.extend(place.geometry.location); }(place)); } map.fitBounds(bounds); searchBox.set('map', map); map.setZoom(Math.min(map.getZoom(),12)); }); }
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <h1>Perform Google Maps Search</h1> <h3> Please enter the place you want to search</h3> <input type="text" id="mapsearch" size="50"> <br> <br> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtaKPvRV8-ciYtnnzG3QI3CO7m4HJyhaI&libraries=places&callback=initMap" async defer></script> </body> </html>
未定義google或Google Maps API錯誤：MissingKeyMapError
[英]google is not defined or Google Maps API error: MissingKeyMapError
Google Places 自動完成 API 錯誤，“google 未定義”
[英]Google Places Autocomplete API error, "google is not defined"
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.