Frontend 3.6 Karten API erstellen

← zurück zur Übersicht

MapDirective

Definition: MapDirective
Modul: happyHour.map.MapDirective
Dateiname: components/map/MapDirective.js
Typ: Angular Direktive
Autor: Denis Beck

Abhängigkeiten

MapLoaderService

Lädt die Google Maps API

Funktionsweise

Die MapDirective "lauscht" auf Veränderungen der Direktivenattribute 'options', 'markers' und 'route'.

$scope.$watch('options', function (options) {
  // Code
});
$scope.$watch('markers', function (markers) {
  // Code
});
$scope.$watch('route', function (markers) {
  // Code
});

In den jeweiligen Funktionen werden dann die Einstellungen, Markierungen oder Routen der Karte gesetzt.

'options' - Die Kartenoptionen

Hier wird ein simples mapOptions-Objekt gebaut, welches dann in der Map-Instanziierung an diese übergeben wird. Sofern keine 'options' gesetzt wurden, werden feste Standardeinstellungen als mapOptions gesetzt.

map = new maps.Map(element.children()[0], mapOptions);

'markers' - Die Markierungen

Hier hilft lodash bei der Iteration durch das übergebene 'marker'-Array. Für jeden Marker wird ein google.maps.Marker-Objekt instanziiert, welches über das map-Attribut auf der Karte platziert wird.

_.forEach(markers, function (marker) {
  var location;
  location = new maps.LatLng(marker.location.latitude, marker.location.longitude);

  new maps.Marker({
    map: map,
    position: location
  });
});

'route' - Die Route

Die umfangreichste Komponente der MapDirective ist die Möglichkeit der Routendarstellung. Das übergebene Route-Objekt wird zunächst in seine einzelnen timeframes aufgespalten und daraus die startLocation, endLocation und die einzelnen waypoints der Route entnommen. Aus diesen Informationen entsteht dann der request, welcher an Google's directionService übergeben wird. Wichtig am Request ist, dass die Wegpunkte nicht von Google nach den kürzesten Wegen optimiert werden sollen (Stichwort Traveling Salesman Problem), da GoHappy die Route selbst, anhand der HappyHour-Zeiten sortiert, erstellt und diese logischerweise auch so angezeigt werden soll.

var request = {
  origin: startLocation,
  destination: endLocation,
  waypoints: waypoints,
  optimizeWaypoints: false,
  travelMode: maps.DirectionsTravelMode.WALKING
};

Sofern die Routenanfrage an Google erfolgreich war wird das response-Objekt auf der Karte dargestellt (via DirectionsRenderer).

directionsDisplay.setDirections(response);

Da Info Windows für eine Route nicht manipuliert werden können, muss ein wenig getrickst werden. Normalerweise würde in den Info Windows zu den jeweiligen Wegpunkten die Adresse aus der response stehen. Da für GoHappy allerdings der Name, die Adresse der Bar und die Verweilzeiten in der Bar angezeigt werden sollen, werden vor der Übergabe der response an den DirectionsRenderer diese manuell so manipuliert, dass in der start_address und end_address des jeweiligen Routenabschnittes die gewünschten Informationen gespeichert werden. Et voilà: Google Maps zeigt die Info Windows an wie gewünscht.

for (var i = 0; i < r.legs.length; i++) {
  r.legs[i].start_address =
    '<b>' + route.timeframes[i].bar.name + '</b><br>' +
    route.timeframes[i].bar.address + '<br>' +
    route.timeframes[i].startTime + ' - ' +
    route.timeframes[i].endTime;
  r.legs[i].end_address =
    '<b>' + route.timeframes[i + 1].bar.name + '</b><br>' +
    route.timeframes[i + 1].bar.address + '<br>' +
    route.timeframes[i + 1].startTime + ' - ' +
    route.timeframes[i + 1].endTime;
}