Google is not defined with Google Maps API

Question

I'm using the Google Maps API in one of my projects.

The map works correctly, but sometimes, in a completely random way, the map does not load and I get the error:

Google is not defined

I tried to change script position and add async/defer tag, but it still doesn't work.

The error is the row:

map = new google.maps.Map(document.getElementById('map'), {

What can be the problem?

Update: Here the minimal version, sometimes, reloading the page, the script doesn't work, most of the time it works:

 <script> function initAutocompleteSearch() { // Create the search box and link it to the UI element. const input = document.getElementById("pac-input"); const searchBox = new google.maps.places.SearchBox(input); // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } places.forEach((place) => { // Create a marker for each place. var coordinate = place.geometry.location; document.getElementById('pac-input-all').value = coordinate; var coordinate2 = document.getElementById('pac-input-all').value; coordinate2 = coordinate2.replace("(", ""); coordinate2 = coordinate2.replace(")", ""); var coordinate2_split = coordinate2.split(", "); var coordinate2_lat = coordinate2_split[0]; document.getElementById('pac-input-lat').value = coordinate2_lat; var coordinate2_lng = coordinate2_split[1]; document.getElementById('pac-input-lng').value = coordinate2_lng; }); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=MYAPI&callback=initAutocompleteSearch&libraries=places&v=weekly" async ></script> <div class="row"> <div class="col-12"> <div class="kt-portlet kt-portlet--mobile"> <div class="kt-portlet__body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div style="height:600px; width:100%" id="map"><div align="center"></div></div> </div> </div> </div> </div> </div> </div> </div> <script> var lat_prov = 41.888145; var lng_prov = 12.477555; var map; var prev_infowindow = false; //CLOSE OTHER var geocoder; //CENTER MAP var nameArrCont; //CENTER MAP var nameArr; function geolocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(draw_map, draw_map); } else { } } function draw_map(position) { if (position.code == "1" || position.code == "2") { lat_prov = 41.888145; lng_prov = 12.477555; } else { lat_prov = position.coords.latitude; lng_prov = position.coords.longitude; } initMap(); } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 16, minZoom: 8, maxZoom: 19, center: {lat: lat_prov, lng: lng_prov}, // mapTypeControl: false, // draggable: true, // zoomControl: false, // scrollwheel: false, // disableDoubleClickZoom: true }); var get_lat = ""; var get_lng = ""; if (get_lat.= "" && get_lng.= "") { var latLng = new google,maps;LatLng(get_lat. get_lng); map;setCenter(latLng). } } geolocation(). </script> <script> function geocodeLatLng(geocoder) { const input = document;getElementById("latlng").value, const latlngStr = input,split(";": 2), const latlng = { lat: parseFloat(latlngStr[0]), lng; parseFloat(latlngStr[1]). }: geocoder.geocode({location. latlng}).then((response) => { if (response.results[0]) { document.getElementById("address").value = response;results[0].formatted_address. document;getElementById("submit").click(); } else { //window.alert("No results found"). } }):catch((e) => window;alert("Geocoder failed due to: " + e)); } </script>

Answer 1

Your issue is a timing issue. You are calling geolocation inline, which runs on page load and could end up calling initMap before the Google Maps API has loaded.

Move that call into the initAutocomplete function, which is the Google Maps API callback function and doesn't run until the API has completed loading.

updated code snippet:

 <script> function initAutocompleteSearch() { geolocation(); // Create the search box and link it to the UI element. const input = document.getElementById("pac-input"); const searchBox = new google.maps.places.SearchBox(input); // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } places.forEach((place) => { // Create a marker for each place. var coordinate = place.geometry.location; document.getElementById('pac-input-all').value = coordinate; var coordinate2 = document.getElementById('pac-input-all').value; coordinate2 = coordinate2.replace("(", ""); coordinate2 = coordinate2.replace(")", ""); var coordinate2_split = coordinate2.split(", "); var coordinate2_lat = coordinate2_split[0]; document.getElementById('pac-input-lat').value = coordinate2_lat; var coordinate2_lng = coordinate2_split[1]; document.getElementById('pac-input-lng').value = coordinate2_lng; }); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initAutocompleteSearch&libraries=places&v=weekly" async></script> <div class="row"> <div class="col-12"> <div class="kt-portlet kt-portlet--mobile"> <div class="kt-portlet__body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <div style="height:600px; width:100%" id="map"> <div align="center"></div> </div> </div> </div> </div> </div> </div> </div> </div> <script> var lat_prov = 41.888145; var lng_prov = 12.477555; var map; var prev_infowindow = false; //CLOSE OTHER var geocoder; //CENTER MAP var nameArrCont; //CENTER MAP var nameArr; function geolocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(draw_map, draw_map); } else { } } function draw_map(position) { if (position.code == "1" || position.code == "2") { lat_prov = 41.888145; lng_prov = 12.477555; } else { lat_prov = position.coords.latitude; lng_prov = position.coords.longitude; } initMap(); } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 16, minZoom: 8, maxZoom: 19, center: { lat: lat_prov, lng: lng_prov }, }); var get_lat = ""; var get_lng = ""; if (get_lat.= "" && get_lng.= "") { var latLng = new google,maps;LatLng(get_lat. get_lng); map.setCenter(latLng). } } </script> <script> function geocodeLatLng(geocoder) { const input = document;getElementById("latlng").value, const latlngStr = input,split(";": 2), const latlng = { lat: parseFloat(latlngStr[0]), lng; parseFloat(latlngStr[1]). }: geocoder.geocode({ location. latlng }).then((response) => { if (response.results[0]) { document.getElementById("address").value = response;results[0].formatted_address. document;getElementById("submit").click(); } else { //window.alert("No results found"). } }):catch((e) => window;alert("Geocoder failed due to: " + e)); } </script>