How can I ensure that my app works with external libraries like Google Maps without an internet connection?

Question

I am currently working on a mobile app using version 1 of the Ionic framework. In this app I am using Google Maps to display a map. The map is being loaded using a script tag and works well while the device is connected to the internet. But if the app is started without an internet connection, the app won't even open. How can I solve this problem?

Answer 1

I am not sure why an Ionic app refuses to open at all when a library cannot be loaded, but luckily this issue can be solved.

TL;DR: You have to load Google Maps asynchronously, so check whether there is a network connection and if there is load the library and otherwise show an error.

---

There are many examples of how to load the Google Maps library asynchronously, like this post from Google , or this question which contains an answer to your question or this question in which the differences between loading using the script tag and loading asynchronously are explained . There is also this question in which it is shown using plain JavaScript .

Now of course that is a lot of text to go through, so here is the summary. Instead of adding a script tag in index.html , you have to load the Google Maps library only when there is an internet connection and load the library using JavaScript. In order to check for an active internet connection, you are going to need cordova-plugin-network-information , which you can find here . You can also use ngCordova to make it easier to use this plugin, you can find the documentation here .

In your controller, you can do something like this:

.controller('MapCtrl', function($state, $scope, $window, $ionicPlatform) {

  // This view event is fired only when the view is loaded for the first time.
  $scope.$on("$ionicView.loaded", function(scopes, states) {
    var isMapLoaded = false;
    var networkState = navigator.connection.type;
    var isOnline = (networkState !== Connection.UNKNOWN && networkState !== Connection.NONE);

    if(isOnline) {
      // If there is a network connection, we load the map.
      var mapsURL = 'https://maps.googleapis.com/maps/api/js?key=[INSERT API KEY HERE]&callback=';

      $window.mapLoaded = function() {
        isMapLoaded = true;
        console.log("The map has been loaded.");
      }

      function loadMapsLibrary(url, callbackFunctionString) {
        var script = document.createElement('script');

        script.type = 'text/javascript';
        script.src = url + callbackFunctionString;

        document.body.appendChild(script);
      }

      $scope.isMapLoaded = isMapLoaded;

      loadMapsLibrary(mapsURL, "mapLoaded");
    } else {
      // It's up to you what you do here, you can show an error for example.
    }

In your view, you may have to use the ng-if directive and the isMapLoaded value to reload the <div> containing the map to ensure that it loads. This should give you a basic idea of what you need to do to get your app working again.