Moving google maps api code to separate file + jquery
Update: Dear friends, this was an awful answer. A really really awful answer.
Well, the solution was fine, the explanation not. This is my strike-through of shame :)
You don't need to set a $(document).ready() because this tells to the browser to call initMap(); when the document is ready but you have async and defer in your goolemaps script which means that when you try to execute your initiation you are missing some things.
Updated Answer:
You need just the initMap() function in your javascript file.
If you wrap your function inside a $(document).ready() function (closures, closures, closures people), then this function(initMap) isn't available outside the $(document).ready().
e.g: This doesn't work and returns error 'Uncaught ReferenceError: myfunc is not defined'
$(document).ready(function(){
myfunc = function(){
console.log('myfunc');
}
})
myfunc();
This will work:
$(document).ready(function(){
myfunc = function(){
console.log('myfunc');
}
myfunc();
})
and this will work:
myfunc = function(){
console.log('myfunc');
}
$(document).ready(function(){
myfunc();
})
Why you say? Because of how javascript scope and closures work of course :)
Gabriel
Data Analyst. Postgres, Oracle, Tableau. Having fun making scrapping tools and other stuff in Go and Javascript. Linux user for 15+ years, Archlinux FTW! Systems Engineering student at UTN.
Updated on June 04, 2022Comments
-
Gabriel almost 2 years
This time, i'll go right to the point:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="code.js"></script> </head> <body> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap"> </script> </body> </html>Code.js:
$(document).ready(function () { var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 10 }); } });Result:
Uncaught TypeError: window.initMap is not a function.Tips?
Also, wonder if this part:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap">Can be moved to the same code.js file.