I've been struggling to show multiple map markers in my Angular project. I have a service called retsAPI that queries a local MLS database for home listings, and I'm attempting to display these items on a Google map. Below is my controller code.
function retsMapController($scope, uiGmapGoogleMapApi, uiGmapIsReady, retsAPI) {
$scope.map = {
center: {
latitude: 43.6376107,
longitude: -116.314943
},
zoom: 10
};
$scope.options = {
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
rotateControl: false,
zoomControl: false
};
$scope.markers = [];
uiGmapIsReady.promise()
.then(function (instances) {
console.log(instances[0].map);
})
.then(function () {
retsAPI.default().success(function(result) {
$scope.results = result;
var i = 0;
result.forEach(function(item) {
$scope.markers.push({
id: Date.now()+i,
coords: {
latitude: item['LMD_MP_Latitude'],
longitude: item['LMD_MP_Longitude']
}
});
i++;
});
console.log("MARKER: ", $scope.markers);
});
});
uiGmapGoogleMapApi.then(function (maps) {
angular.extend($scope.map, {
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
}
}
});
});
Here is my HTML code.
<div id="real_angular" ng-controller="retsMap" ng-app="real_angular">
<div rets-search-form></div>
{{ markers }}
<ui-gmap-google-map
ng-if="map.center"
center='map.center'
zoom='map.zoom'
options='options'
refresh="true">
<ui-gmap-markers
models="markers"
coords="'self'"
icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
And here are the markers retrieved from $scope.markers
[{"id":1481596995980,"coords":{"latitude":"43.7335624694824","longitude":"-116.400283813477"}},{"id":1481596995981,"coords":{"latitude":"44.9327393","longitude":"-116.0692291"}},...It seems like the Google controls are missing. I'm unsure what caused them to disappear.