72 lines
4.1 KiB
JavaScript
72 lines
4.1 KiB
JavaScript
"use strict";
|
|
(function () {
|
|
'use strict';
|
|
angular.module('myitsmApp')
|
|
.directive('embeddedLocationMap', ['$state', '$timeout', 'googleMapService', '$window',
|
|
function ($state, $timeout, googleMapService, $window) {
|
|
return {
|
|
restrict: 'AE',
|
|
//transclude: true,
|
|
replace: true,
|
|
template: '<div></div>',
|
|
scope: {
|
|
userLocation: '=center',
|
|
mapOptions: '@options',
|
|
locationObjects: '='
|
|
},
|
|
link: function (scope, $elem) {
|
|
/**
|
|
* Embedded location map directive.
|
|
* This directive, will be rendering DOMs, with attributes embedded-location(or data-embedded-location, ng-embedded-location) or tags <embedded-location> etc.
|
|
* Following directive attributes should be specified:
|
|
* @param ng-attr-center - this can be a string or an object. If string is specified, directive will try to geocode it and run initialization method with geocoded coordinates.
|
|
* In other case, this attribute will be used as google map center and user location.
|
|
* @patam ng-attr-options - mapOptions, that will be used to initialize google map. Note that googleMapService, used for this, already has default mapOptions, which will be
|
|
* overridden with ones specified in directive attributes
|
|
* @param ng-attr-map-data - this object will contain resulting map and userLocation properties, which can be used to update location directive if needed
|
|
* */
|
|
var getProperType = function (subject) {
|
|
return Object.prototype.toString.call(subject).slice(8, -1);
|
|
};
|
|
scope.initLocationMap = function (userCoords) {
|
|
if (userCoords) {
|
|
if (!scope.mapOptions) {
|
|
scope.mapOptions = {};
|
|
}
|
|
scope.mapOptions.center = userCoords;
|
|
}
|
|
var mapInitPromise = googleMapService.initLocationMapWithUserMarker($elem[0], scope.mapOptions, userCoords);
|
|
mapInitPromise.then(function (mapEntities) {
|
|
scope.locationMap = mapEntities.map;
|
|
scope.userMarker = mapEntities.marker;
|
|
scope.locationObjects = mapEntities;
|
|
bmcMaps.event.addListener(scope.locationMap, 'click', function () {
|
|
var url = googleMapService.getDirectionUrl(scope.userLocation.address);
|
|
$window.open(url, '_blank');
|
|
});
|
|
});
|
|
};
|
|
scope.geocodingFailed = function () {
|
|
console.log('Geocoding failed!');
|
|
};
|
|
if (googleMapService.isAvailable) {
|
|
scope.$watch('userLocation', function (newVal) {
|
|
if (!newVal || _.isEmpty(newVal)) {
|
|
return;
|
|
}
|
|
var shouldUseAddressGeocoder = getProperType(scope.userLocation.address) === 'String' ? true : false;
|
|
shouldUseAddressGeocoder ? googleMapService.getLocationCoordinatesByAdress(scope.userLocation.address, scope.initLocationMap, scope.geocodingFailed) : scope.initLocationMap();
|
|
}, true);
|
|
}
|
|
scope.$on('$destroy', function () {
|
|
// Possible situation, when map is still getting initialized, but user is getting redirected to different state
|
|
if (scope.locationMap) {
|
|
bmcMaps.event.clearInstanceListeners(scope.locationMap);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
]);
|
|
})();
|