I created a directive called "myMap" to incorporate a Google map into my application. However, I am facing an issue when attempting to update the longitude and latitude values for a different location using a controller function. The directive does not reflect the updated values, and the same map is being displayed.
Below is my Directive code:
directive('myMap', function () {
// directive link function
var link = function (scope, element, attrs) {
var map, infoWindow;
var markers = [];
// map configuration
var mapOptions = {
center: new google.maps.LatLng(attrs.latitude, attrs.longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
// initialize the map
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
// add a marker
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
animation: google.maps.Animation.Bounce
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
if (infoWindow !== void 0) {
infoWindow.close();
}
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
initMap();
setMarker(map, new google.maps.LatLng(attrs.latitude, attrs.longitude), attrs.restname, attrs.address);
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
});
Next, I include this directive in my HTML as shown below:
<div class="gmaps" my-map="" latitude="{{home.latitude}}" longitude="{{home.longitude}}"></div>
I have tried various methods to resolve this issue without success. How can I monitor changes in the directive parameters to track updates in longitude and latitude values? Any assistance would be greatly appreciated.