Google not defined error
Question
I am making a webpage with Google Maps API but I am getting "google not defined error"
How can I get rid of this?
How can I import Google or do something to make this piece of code work?
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 answers
solution1
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". Move this before your script and drop the async defer - or do your script inside a "$( document ).ready"
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtaKPvRV8-ciYtnnzG3QI3CO7m4HJyhaI&callback=initMap"
async defer></script>
solution2
0 ACCPTED 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'));
So you are getting google undefined error.
Also you have add parameter &libraries=places to google map script src
working example
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.