Google未定义错误
[英]Google not defined error
问题描述
I am making a webpage with Google Maps API but I am getting "google not defined error" 
我正在使用Google Maps API制作网页，但出现“未定义Google错误”
How can I get rid of this? 我该如何摆脱呢？
How can I import Google or do something to make this piece of code work? 如何导入Google或做些什么使这段代码起作用？
I want a program in which user will enter location and it shows marker there. 我想要一个程序，用户可以在其中输入位置并在其中显示标记。 but it is not working properly. 但它不能正常工作。
Here is my code: 这是我的代码：
<!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
Most likely your google APIs have not loaded, when your script needs them - hence the "google not defined error". 当您的脚本需要它们时，很可能您的Google API尚未加载-因此出现了“未定义Google错误”。 Move this before your script and drop the async defer - or do your script inside a "$( document ).ready" 将其移到脚本之前，然后放下异步延迟-或将脚本放入“ $（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 function should be closed at last you are closing it before var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch')); 您必须先关闭initMap函数，然后再关闭它，然后var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
So you are getting google undefined error. 因此，您将收到google undefined错误。
Also you have add parameter &libraries=places to google map script src 此外，您还向Google地图脚本src添加了参数&libraries=places
working example 工作实例
https://plnkr.co/edit/ngtGvuhDDZAnovwPnPXh?p=preview 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.