Ionic3 : I can't handle google maps callback


#1

I’m working with Ionic 3 and I’m trying to integrate Google Maps Javascript API, I decide to integrate it manually because I need to use a custom configuration.

index.html:

  <!-- GOOGLE MAP -->
  <script src="https://maps.googleapis.com/maps/api/js?
key=
&libraries=places
&callback=initialize"
  async defer></script>

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

The problem is that I don’t know how to handle the callback which is offered by the API mentioned at the end of the script URL,

if we delete the callback from the url, The map become unstable, sometime it works and sometime we had the famous error “google is not defined” and that because the initMap() in my home.ts and the loading of the Google Map API are not synchronized, so if the Google Maps Api loaded before the App calls initMap() it works correctly and vice versa.

So please how can I handle this callback with Angular 2+ to take off tiis instability ?


#2

You might be interested in this tutorial I released recently: https://www.joshmorony.com/using-google-maps-and-geolocation-in-ionic-with-capacitor/

Specifically, the callback you mention is handled by attaching a function to the global window object:

            window['initialize'] = () => {
               // runs once map is loaded
            }

#3

I solved this issue by moving google map script tag between head and body, I don’t know how it worked but the issue has been resolved, and I think that it’s dirty solution.