Мне не удается заполнить маркеры на моих картах Google с помощью angularJS
HTML
<section class="module module-divider-bottom p-0" style="height: 500px;" ng-controller="LocationsController">
<div id="map"></div>
</section>
AngularJS Controller
angular.module('cuApp')
.controller('LocationsController',
[
'$scope', 'LocationsService', '$compile',
function($scope, locationsService, $compile) {
$scope.map = '';
$scope.model = {
canvasLocationsData: [],
canvasLocationMarkers: []
};
locationsService.GetCanvasLocations().then(function(response) {
if (response.data) {
$scope.model.canvasLocations = response.data;
angular.forEach(response.data.response.locations,
function(value, key) {
if (value.locatorType === "S") {
$scope.model.canvasLocationsData.push(value);
var tempArry = [];
tempArry.push(value.institutionName);
tempArry.push(value.latitude);
tempArry.push(value.longitude);
$scope.model.canvasLocationMarkers.push(tempArry);
}
});
}
});
function initialize() {
var initLatLng = { lat: 39.742043, lng: -104.991531 };
var mapOptions = {
zoom: 10,
center: initLatLng,
mapTypeControl: false
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
setMarkers($scope.map);
}
var locations = $scope.model.canvasLocationMarkers;
function setMarkers(Map) {
var icon = {
url: '/files/imgs/cnv_marker.png',
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[1], location[2]),
map: Map,
icon: icon,
title: location[0]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
}
]);
Расположение выглядит следующим образом: это массив массивов:
0:["Canvas CU", "39.748500", "-104.997000"]
1:["Canvas CU", "39.745200", "-105.006000"]
2:["Canvas CU", "39.729300", "-104.941000"]
Карта будет успешно загружена на html-странице, однако маркеры никогда не будут отображаться.Я не уверен, что это потому, что вызов для получения данных маркеров поступает после загрузки карты и во время загрузки $scope.model.canvasLocationMarkers
пусто или что-то не так с моим кодом.
JSFiddle: Не использует AngularJS, но все еще не может отобразить маркеры: https://jsfiddle.net/n29au068/4/