Получение Google Maps для работы с AngularJS

Question

Мне не удается заполнить маркеры на моих картах 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/

Answer 1

вы использовали функцию Map вместо локальной переменной map, измените ее на строчную карту

        position: new google.maps.LatLng(location[1], location[2]),
        //map: Map,        is wrong
        map: map,
        icon: icon,
        title: location[0],