Frontend Helper PlacesAutocompleteDirective

← zurück zur Übersicht

PlacesAutocompleteDirective

Definition: [PlacesAutocompleteDirective](Frontend Interface PlacesAutocompleteDirective)
Modul: happyHour.directives.PlacesAutocompleteDirective
Dateiname: components/directives/PlacesAutocompleteDirective.js
Typ: Angular Direktive
Autor: Markus Thömmes

Abhängigkeiten

MapLoaderService

Lädt die Google Maps API

Funktionsweise

Auf das durch die Direktive erzeugte input-Element wird der Autocomplete-Service von Google initialisiert.

var options = {
  componentRestrictions: {country: 'de'}
};
var api = new maps.places.Autocomplete(input, options);

Über das place_changed-Event wird abgefangen, wenn der Nutzer ein Ergebnis aus dem Dropdown-Menü auswählt. Daraufhin wird das ausgewählte Objekt ausgelesen und dessen Lokation als Location-Objekt an die result-Variable im Scope übergeben. Der Scope wird über diese Änderungen über $apply informiert.

maps.event.addListener(api, 'place_changed', function() {
  var place = api.getPlace();
  $scope.$apply(function() {
    $scope.result = {latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng()};
  });
});

Bei jeder Änderung des result-Attributs (durch den View oder den Controller), wird das Location-Objekt reverse-geokodiert (Herausfinden einer Adresse aus einer geografischen Lokation) und die Adresse im erstellten input-Element angezeigt.

$scope.$watch('result', function(location) {
  var googleLocation = new maps.LatLng(location.latitude, location.longitude);
  geocoder.geocode({latLng: googleLocation}, function(result, status) {
    if (status === maps.GeocoderStatus.OK) {
      input.value = result[1].formatted_address;
    }
  });
});