https://i.stack.imgur.com/qUyRo.png
I'm in a bit of a pickle trying to figure out how to properly display the information when clicking on a marker. I attempted to include $scope.info in the onClick function, but it still refuses to show up.
Could someone lend a hand in resolving this issue? My front-end skills are not extremely advanced
Snippet from Relevant HTML file:
<div ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()">
<div>{{mapCtrl.info}}</div>
</ui-gmap-window>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
map-controller.js
projectControllers.controller('mapCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady){
uiGmapGoogleMapApi.then(function (maps) {
//$scope.googlemap = {};
$scope.map = {
center: {
latitude: 40.1451,
longitude: -99.6680
},
zoom: 4,
pan: 1,
options: $scope.mapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {},
dragend: function (maps, eventName, args) {},
zoom_changed: function (maps, eventName, args) {}
}
};
});
$scope.options = {scrollwheel: false};
$scope.marker = {
title: 'Address',
address: "",
coords: {
latitude: 40.1451,
longitude: -99.6680
},
visible: false,
id: 0
};
$scope.windowOptions = {
show:false
};
$scope.onClick = function (data) {
console.log(data);
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('Office Name ' + data);
//alert('This is a ' + data);
};
$scope.info = "Bug! Info issue"; // Trying to set in onclick, but it doesn't reflect
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
.then(function (instances) {
console.log(instances[0].map); // get the current map
})
.then(function () {
$scope.markers = [];
for (var i = 0; i < $scope.addresses.length; i++) {
$scope.markers.push({
id: $scope.markers.length,
coords: {
latitude: $scope.addresses[i].lat,
longitude: $scope.addresses[i].lng
},
data: $scope.addresses[i].name
});
}
$scope.addMarkerClickFunction($scope.markers);
});
$scope.addMarkerClickFunction = function (markersArray) {
angular.forEach(markersArray, function (value, key) {
console.log(value);
value.onClick = function () {
$scope.info = value.data; //Doesn't seem to take the value here
$scope.onClick(value.data);
$scope.MapOptions.markers.selected = value;
};
});
};
$scope.MapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
},
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
elementType: "all",
stylers: [{
visibility: "off"
}]
}],
};
});