4 Ways To FIX Uncaught ReferenceError: google is not defined
You’re working on the Google Maps API in your JavaScript or Vue JS project and suddenly you’re running into the Uncaught ReferenceError: google is not defined.
Here are the 4 scenarios that may cause the Google is not defined error and how to fix them.
- Missing Google Maps API Script In The HTML File
- Instantiate Google Maps Object Before Loading API SDK
- Calling Callback Function Before Declaration
- Google Maps Object Not in Global Scope
1. Missing Google Maps API Script In The HTML File
The first scenario for why you’re getting the error is because the Google Maps API script is not included in your HTML file. 🛑
As you can see from this simple index.html file…I’ve instantiated the google maps object without including the Google Maps API script anywhere in the index.html file.
When I run it of course I get the error…
✅ To fix the error, just include the Google Maps API script inside the head tags.
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>Let’s run the app and the error is gone and Maps is working….Perfect.
2. Instantiate Google Maps Object Before Loading API SDK
The second scenario for why you’re getting the error is you’re trying to instantiate the Google Map object before the Google Maps API script is fully loaded. 🛑
Even though I have included the Google Maps API script…when I run the app…I get the error.
This is one of the scenarios a lot of my students run into…
What happens is that the browser will execute the Javascript code starting at the top and going to the bottom, line by line…
When it hits the line where the google object gets instantiated..in this case, line 27…the Google Maps API script tag has not started loading yet… because…I’ve included the Google Maps API script right below the instantiation code…in line 35
That means…the browser could not find a reference to instantiate google object.
✅ To fix the error… you need to load the Google Maps API script first before instantiating the google maps object.
Move the Google Maps API script tag right above the other script tags…and the error is gone.
Pretty simple and straightforward.
3. Calling Callback Function Before Declaration
The third scenario for why you’re running into the google is not defined error is that you’re trying to call the callback function inside the Google Maps API script as a URL parameter before declaring it first.
As you can see in the Google Maps API URL,… I’ve added the callback url parameter with the value of the function initalizeMap
🛑 Error Code
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initializeMap"></script>
<script>
function initializeMap() {
new google.maps.Map(document.getElementById('map'),{
center: {
lat: 45.4222931,
lng: -75.6870167
},
zoom: 15
});
}
</script>Right below the Google Maps API script….I’ve instantiated the google maps object inside the initalizeMap function.
When I run the app I get the error because the initalizeMap is called when the first line of code gets executed but the actual declaration of the initalizeMap function is below.
As you know..in JavaScript… you’ll need to declare a function first before calling it…
✅ To fix that..just move the Google Maps API script tag right below the other script tags where I called the initalizeMap function
<script>
function initializeMap() {
new google.maps.Map(document.getElementById('map'),
center: {
lat: 45.4222931,
lng: -75.6870167
},
zoom: 15
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initializeMap"></script>
4. Google Maps Object Not in Global Scope
The fourth scenario for why you’re getting the error is when you’re working with external libraries or frameworks as they have their own scope or module system such as Google Maps API Loader, vue3-google-map, and so on.
When you’re working with libraries..sometimes.. the google maps object is not accessible within the current scope.
✅ To fix that… We need to add window in front it like so, that way you explicitly reference the google object from the global scope.
…as you know the window is a global object in browsers
<script>
new window.google.maps.Map(document.getElementById('map'),
center: {
lat: 45.4222931,
lng: -75.6870167
},
zoom: 15
});
</script>You won’t need to use window when working with the Google Maps API in most cases… However, if you encounter an error indicating that google is not defined, adding window can help resolve the issue by explicitly accessing the global google object.
I hope any of these solutions will fix your google is not defined error…
Let me know which scenario you run into and how you fixed it…or if you tried everything and still have an error..let me know in the comments below…