<html>
<script src=";callback=initMap">
</script>
<body onload="showMap()">
<div id="map"></div>
<script type="text/javascript">
function showMap() {
console.log('at maps');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -34.397, lng: 150.644 }
});
}
</script>
</body>
</html>
I'm new to scripting . This is my code to display the map. But it throws an uncaught error "initMap is not a function". Can anyone help ??
<html>
<script src="https://maps.googleapis./maps/api/jskey=YOUR_API_KEY&callback=initMap">
</script>
<body onload="showMap()">
<div id="map"></div>
<script type="text/javascript">
function showMap() {
console.log('at maps');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -34.397, lng: 150.644 }
});
}
</script>
</body>
</html>
I'm new to scripting . This is my code to display the map. But it throws an uncaught error "initMap is not a function". Can anyone help ??
Share Improve this question edited Sep 20, 2017 at 10:42 Akshara asked Sep 20, 2017 at 10:30 AksharaAkshara 1371 gold badge2 silver badges12 bronze badges 3- How/where are you including the Google Maps Javascript API? – geocodezip Commented Sep 20, 2017 at 10:31
- have included with api key.. But still error thrown – Akshara Commented Sep 20, 2017 at 10:35
-
There is no reference to
initMapin the posted code (so it is very unlikely to exhibit the issue reported in the (current) title of the question). Please provide a minimal reproducible example that demonstrates your issue. – geocodezip Commented Sep 20, 2017 at 10:38
6 Answers
Reset to default 3Rename showMap to initMap. Google is expecting to call a function named initMap because of the callback=initMap URL parameter you've passed them when loading in the Maps API. But you don't have a function with that name, you've only got a function called showMap.
Also, by specifying that callback parameter, you don't need to then explicitly call initMap or showMap yourself. So remove onload="initMap()" from the <body> tag.
Also, when you load in the Maps API, you've got a typo in the URL, instead of:
jskey=YOUR_API_KEY
it should be:
js?key=YOUR_API_KEY
And finally, you're missing any <head> section, which I've added, and I've moved the function into the <head> so it should be defined by the time the callback function gets called.
So this should work:
<html>
<head>
<script src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
console.log('at maps');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -34.397, lng: 150.644 }
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Late late answer but you might want to check this answer. The main problem is that you are not putting the script after defining the map. Code simply is looking for a web element before it's created on the page.
Moving the google.map API call
<script src="https://maps.googleapis./maps/api/js?key=API_CODE&callback=initMap" async defer></script>
after function initMap() is defined fixed this problem for me. I guess Javasrcipt runs sequentially so it can't see the initMap() function when it is defined in the google.map callback.
Hi i'm playing too with google maps and i see this error occurs when you open the same file in different tabs of the navigator...
I'm talking about " Uncaught: Vb "
When you reboot your puter this error deseapear so for not reboot you can press 'F12' and then go to 'Network' tab ( F5 ), right click over anything then 'clear browser chache' & 'clear browser cookies'..
If the error Uncaught: Vb still press F5 Two or Three times
Other reference for this question:
GoogleMaps does not load on page load
Anyways your error is thrown cause you don't specify YOUR_API_KEY and the paramater in the URL is not well formatted ( js?key= )
Check this:
https://developers.google./maps/documentation/embed/get-api-key
To us google maps you have to first include reference to google maps javascript file.
Include this script below your body.
<script src="https://maps.googleapis./maps/api/js"></script>
Please also read documentation of google maps. You might need api keys too.
Put this script tag in you head section.
<script src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Make sure you replace YOUR_API_KEY label with your key which you can get from here..
https://developers.google./maps/documentation/javascript/