How do I load Google Maps JS API in PhoneGap to use it multiple times?-Collection of common programming errors

11 years ago
admin
2 minutes

I’m developing a PhoneGap application with multiple pages and some of them show a map.

Now what I’m trying to do is to load the Google Maps API when the page loads so I can access it whenever I need it. Now there are several options:

  1. Load the script without a callback parameter in the URL ...(url)&callback=functionName when the page loads
    Result: the google.maps object is created but it’s almost empty. The functions are all missing.

  2. Load the script with a callback parameter in the URL when the page loads
    Result: the functions in google.maps are all available, but when I create a Map, I only get an empty inside the container element. So it seems it starts to create the map, but the rest is missing.
    The funny thing here is: it works perfectly in desktop browsers, but it does not in a phonegap application – doesn’t matter if Android or iOS.

  3. Load the script with a callback, but every time a map should be displayed
    Result: it seems to work, but an error/a warning in the console shows up, telling me there may occur unexpected problems if I load the Maps API more than once. Plus it creates unnecessary server requests which slow down the application.

Running option 2 in Ripple Emulator tells me that the application tries to open a InAppBrowser when I open a page that should display a map. I don’t have much experience with InAppBrowser, so I don’t know what this is trying to tell me or if it even is related to the problem…

Currently I’m including the script via a simple

var script = document.createElement('script');
script.type ...
script.src = 'http://maps.googleapis.com/.....';
document.body.appendChild(script);

Does anyone know how to include and use the API in a case like this? Also the parameters I want to pass to the new google.maps.Map() constructor differ. So I need a flexible way to do this.

Thanks for any help
Andreas