Display loading animation until Google Maps is fully loaded - Utilizing AngularJs

Question

Display loading animation until Google Maps is fully loaded - Utilizing AngularJs

Is there a way to check the readiness of Google Maps before displaying it? I'd like to show a preloader block while the Google Maps is loading.

Here is the factory code I am using:

var map = false;
var myLatlng = new google.maps.LatLng(48.6908333333, 9.14055555556);

var myOptions = {
    zoom: 5,
    minZoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggableCursor:'crosshair',
    zoomControl: false,
    center: myLatlng,
    panControl: false,
    streetViewControl: false,
    preserveViewport: true
}

function addMap(mapId) {
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
}

function getMap(mapId) {
    if (!map) addMap(mapId);
        return map;
}

return {
    addMap: addMap,
    getMap: getMap
}

And here is the code inside the controller:

$scope.map = GoogleMaps.getMap();

Appreciate your help!

javascript angularjs google-maps

Answer 1

Answer №1

To ensure that the Google Maps event is triggered once the map is ready, you can add an event listener as shown below:

function addMap(mapId) {
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListenerOnce(map, "idle", function () {
        scope.$emit('mapInitialized', map);
    });
}

In your splash screen directive, you can then listen for the event like this:

$scope.$on('mapInitialized', function(event, map) {
    // this is where you can manipulate variables to hide the splash screen
});

Here is a sample code snippet that includes a black splash screen:

angular
  .module('splashMap', [])
  .directive('map', function() {
      var link = function(scope, element) {

        var el = document.createElement("div");
        el.style.width = "100%";
        el.style.height = "100%";
        element.prepend(el);

        var map = new google.maps.Map(el, {
          center: {
            lat: 48.6908333333,
            lng: 9.14055555556
          },
          zoom: 8

        });

        google.maps.event.addListenerOnce(map, "idle", function() {
          scope.$emit('mapInitialized', map);
        });

      }
      return {
        restrict: 'E',
        link: link
      };

    }

  ).directive('splash', function() {
    var link = function(scope, element) {
      scope.loaded = false;
      scope.$on('mapInitialized', function(e, map) {
        console.log('loaded');
        scope.loaded = true;
        scope.$apply();
      })
    }
    return {
      restrict: 'E',
      link: link,
    }
  });

body,
html,
map {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
map,
splash {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
splash {
  background-color: #000;
  z-index: 2;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="splashMap">

  <splash ng-hide="loaded"></splash>

  <map></map>

</body>

Answer 2

To ensure that the Google Maps event is triggered once the map is ready, you can add an event listener as shown below:

function addMap(mapId) {
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListenerOnce(map, "idle", function () {
        scope.$emit('mapInitialized', map);
    });
}

In your splash screen directive, you can then listen for the event like this:

$scope.$on('mapInitialized', function(event, map) {
    // this is where you can manipulate variables to hide the splash screen
});

Here is a sample code snippet that includes a black splash screen:

angular
  .module('splashMap', [])
  .directive('map', function() {
      var link = function(scope, element) {

        var el = document.createElement("div");
        el.style.width = "100%";
        el.style.height = "100%";
        element.prepend(el);

        var map = new google.maps.Map(el, {
          center: {
            lat: 48.6908333333,
            lng: 9.14055555556
          },
          zoom: 8

        });

        google.maps.event.addListenerOnce(map, "idle", function() {
          scope.$emit('mapInitialized', map);
        });

      }
      return {
        restrict: 'E',
        link: link
      };

    }

  ).directive('splash', function() {
    var link = function(scope, element) {
      scope.loaded = false;
      scope.$on('mapInitialized', function(e, map) {
        console.log('loaded');
        scope.loaded = true;
        scope.$apply();
      })
    }
    return {
      restrict: 'E',
      link: link,
    }
  });

body,
html,
map {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
map,
splash {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
splash {
  background-color: #000;
  z-index: 2;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="splashMap">

  <splash ng-hide="loaded"></splash>

  <map></map>

</body>

Answer 3

Answer №2

As of now, I haven't had the opportunity to explore Google Maps.

However, is it possible to achieve this by utilizing the following event:

tilesloaded

Alternatively, you could explore other events mentioned in the following document:

https://developers.google.com/maps/documentation/javascript/reference

Answer 4

As of now, I haven't had the opportunity to explore Google Maps.

However, is it possible to achieve this by utilizing the following event:

tilesloaded

Alternatively, you could explore other events mentioned in the following document:

https://developers.google.com/maps/documentation/javascript/reference

Display loading animation until Google Maps is fully loaded - Utilizing AngularJs

Answer №1

Answer №2

Similar questions

Guide on verifying internet connection status using Ajax request

Guide to establishing a connection to the Companies House API: Essential guidelines on setting up cURL headers and requisite API key specifications

Using the Karma testing framework to interact with the service of an AngularJS application

How to utilize the Ember generate command for an addon

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

background image alteration when scrolling

In order to ensure proper alignment, adjust the width of the select element to match the width of the

We encountered a surprise issue: "/Users/username/package.json: Unexpected character \ in JSON at index 1" – this is not a duplicate question

Having trouble with your custom AngularJS directive not functioning correctly?

What is the process for saving information to a database with JavaScript?

Activate on-demand static regeneration with Next.js

Sidenav Content with all elements having opacity applied

Tips for updating the filename in a file input using AngularJS

What is the process for updating a placeholder text after the user makes a guess or enters

Eliminate every instance using the global regular expression and the replace method from the String prototype

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

Once the GeoJson data is loaded with map.data.loadGeoJson, the circle events are obscured by the polygons from the

Creating Docker images in a lerna monorepo without the need for publishing

Combining Two Tables Using jQuery

Revising variables in Java Script