Frontend Komponente MapLoaderService

← zurück zur Übersicht

MapLoaderService

Definition: MapLoaderService
Modul: happyHour.map.MapLoader
Dateiname: components/map/MapLoader.js
Typ: Angular Service
Autor: Markus Thömmes

Abhängigkeiten

$q

Liefert die Möglichkeit Promises zu erstellen.

$window

Liefert Zugriff auf das window-Objekt.

$document

Liefert Zugriff auf das document-Objekt. Verpackt dieses Objekt zusätzlich in eine jqLite Wrapper.

Funktionsweise

Der MapLoaderService sorgt dafür, dass die Google Maps Javascript API geladen wird. Ist die API-vollständig geladen, wird die Anwendung über ein Promise darüber informiert.

Zunächst wird hierzu ein Promise erstellt.

var deferred = $q.defer();

Der Service registriert nun eine globale Funktion (auf dem window-Objekt), die von Googles API aufgerufen wird, sobald die Karten-API verfügbar ist. Die globale Funktion zerstört sich dann selbst und bestätigt das Promise.

var callbackName = 'onGoogleMapsReady';
$window[callbackName] = function() {
  $window[callbackName] = null;
  deferred.resolve($window.google.maps);
};

Das Skript, das geladen wird um die Maps API einzubinden lädt selbst weitere Skripte asynchron nach. Es ist daher notwendig diesem "Wrapperskript" eine Callback-Funktion mitzuteilen, die es aufrufen wird, sobald diese Skripte nachgeladen sind. Um das eigentliche Laden des Wrapperskripts anzustoßen, wird ein HTML script-Element mit der URL zu Googles API (die den Funktionsnamen der globalen Funktion enthält und somit aufgerufen wird wenn die API fertig geladen ist) in das HTML-Dokument injiziert.

var script = angular.element('<script></script>');
script.attr('src', 'https://maps.googleapis.com/maps/api/js?callback='+callbackName);
$document.find('body').append(script);