Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught InvalidValueError: initMap is not a function #14

Closed
itsahsiao opened this issue May 15, 2016 · 10 comments
Closed

Uncaught InvalidValueError: initMap is not a function #14

itsahsiao opened this issue May 15, 2016 · 10 comments
Labels

Comments

@itsahsiao
Copy link
Owner

itsahsiao commented May 15, 2016

While working on feature (ref: Issue #6 ), sometimes when loading user profile html, the map doesn't load and I get this error: Uncaught InvalidValueError: initMap is not a function.

If I refresh the page, the map loads, but sometimes it still spits out this error. Very strange.

@itsahsiao
Copy link
Owner Author

Possible solution: http://stackoverflow.com/questions/34466718/googlemaps-does-not-load-on-page-load

@itsahsiao
Copy link
Owner Author

itsahsiao commented May 15, 2016

Read about namespace in the Stack Overflow link provided above, and error seems to go away when I moved script for jquery before the google maps script (see below).

From:

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap"></script>
<script src="https://code.jquery.com/jquery.js"></script> 

To:

<script src="https://code.jquery.com/jquery.js"></script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap"></script>

Refreshed many times and no issues. Monitor this issue for now, as need to eventually move script code to separate js file and may come across this error. Might also have something to do with the async defer code in the script, that parts of page needs to load before the map but something could be interfering?

@itsahsiao
Copy link
Owner Author

itsahsiao commented May 31, 2016

Upon implementing Bootstrap, this error came up again. Need to review where to place the JS script code for Google Maps, so that map loads properly.

@itsahsiao
Copy link
Owner Author

itsahsiao commented May 31, 2016

Moved JS script code for Google Maps to bottom of user profile html, which caused even more errors:
screen shot 2016-05-31 at 12 12 04 am
May be due to jQuery not being defined before the script, as the script for jQuery is at bottom of page in the base template with Bootstrap scripts.

Moved jQuery to the <head> in base template, which has caused these errors for jQuery to go away, along with the error that initMap is not a function. Continue monitoring regarding this initMap issue.

@jk195417
Copy link

maybe try to put all the google api scripts into even your initMap function

@ki9us
Copy link

ki9us commented Jan 5, 2017

It might help to move the callback to the global scope. That seems to have helped me.

@jguzmanf88
Copy link

Can you fix this problem?

@ki9us
Copy link

ki9us commented Jan 14, 2017 via email

@itsahsiao
Copy link
Owner Author

Hey guys, sorry for the late reply!

I haven't had this error come up anymore and forgot to close the issue. I believe that the error was caused by me not loading the libraries/dependencies first before calling on my JS script that contained the initMap function. So it was definitely a namespace issue on my end.

Will be revising my Jinja template to make sure that future JS scripts are in the proper namespace.

@nganani
Copy link

nganani commented Aug 5, 2018

had the same issue and same solution, thank you. moved scripts to last thing before </body> instead of in the <header> section and it now works well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants