I know this question has been asked. But I still can't get past it. I am simply trying to get googlemaps API loaded in js fiddle. I cannot get past the error:initMap is not a function. My jsfiddle here: jsfiddle
My code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
HTML:
<div id="map" style="width: 500px; height: 400px;"></div>
<script async defer
src="">
</script>
When I have the function initmap(){} (with brackets) the map does not load and I get the error.
When remove the function initmap{}and just:
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
The map loads, however I still get the error:
initMap is not a function
It might have something to do with a callback. I have not written javascript in a while. But I just need to get past this error. Thanks
6 Answers
Here's a JSFiddle of how it works.
Essentially place your function above the call to Google API
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
} // close function here
</script>
<script async defer
src="">
</script>
Also the function wasn't properly closed.
TL;DR
In the fiddle, you have a syntax error in not closing the iniMap() with }. Besides, the function is defined after the DOM loads. To fix this:
- set load type to wrap in
<body>or<head> - fix syntax error
Here's how to deal with these.
Global scope
Place initMap in the global scope. do not wrap the function definition within a private or anonymous scope like
(function(){
function initMap(){
//
}
})();
DOM onload
Define the function in the <head> if possible. or at least before loading the API in <body>. And never define initMap after the dom completely loads like window.onload and document.addEventListener('ondomready', callback)
Good practice
<script>
function initMap(){
//
}
</script>
<script src=""></script>
Bad practices:
window.onload
<script>
window.onload = function(){
function initMap(){
//
}
}
</script>
<script src=""></script>
And
<script>
document.addEventListener('ondomready', function(){
function initMap(){
//
}
});
</script>
<script src=""></script>
Or $(function(){ }) if you are using jQuery
<script>
$(function(){
function initMap(){
//
}
});
</script>
<script src=""></script>
I have been looking for an answer in many forums, but I just found in my code there was a lost ';'. After deleting the ';' everything worked well.
I know it's not the best answer but I hope it helps someone.
You are calling initMap before it was declared.
<script async defer src=""> </script>
var initMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
}
initMap()
I stumbled upon this problem too, but in my case the culprit seems to be mod_pagespeed.
I think it modifies the order of scripts in the page, thus previous solutions did not work. I managed to solve it by dynamically adding the Map's script tag.
<script>
function initMap() {
// some code
}
// dynamically add your map
var tag = document.createElement('script');
tag.src = "";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
I was using leaflet.js and Google gave me this as my default script
<script async defer src=""></script>
Basically just remove the Callback Query String Parameter because leaflet is supposed to call it.
<script async defer src=""></script>
