I built a website with Angular 2+ and included the Google Maps Api in my index.html file:
<script
async
defer
src="//maps.googleapis.com/maps/api/js?[myKey]&libraries=places">
</script>
<script src="//unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
After I reload the page only on my Iphone, the map won't show and I get the error: "Can't find variable : google"
On PC and Android it is working fine.
What can i do to solve the error?
Looks like the scripts run out of order, which is a major gotcha of asynchronous script loading. The first script with defer or async attribute loads in parallel while browser continues, and only executes after loaded, while the second (synchronous) script blocks the browser and runs immediately after loaded (which takes place either after or before execution of the first script, so the order is unpredictable).
To maintain the order, either add defer to the second script and remove async from the first (making both equally deferand hence in order), or remove defer and async from the first script to make it load normally.
