While working on a project that uses Google Maps API, I noticed the following problems:
- The content below Google maps appeared after a slight delay
- Google PageSpeed Insights kept telling me to "eliminate render-blocking JavaScript and CSS in above-the-fold content"
- The maps did not load when the page was loaded via AJAX
- The maps did not work in jQuery Mobile
All of these problems were caused because I was loading the Google Maps API synchronously. Let me explain. Almost all Google Maps API examples tell you to do this: