Как заставить Google Maps загружаться в моем приложении с угловыми углами, используя угловую директиву

Question

У меня проблема, когда моя карта Google не отображается в 80% случаев. Кажется, ситуация, когда моя карта не полностью отобразилась к тому времени, когда остальная часть моих данных была заполнена в моем угловом виде.

Как я могу заставить мою карту загрузить?

Я сделал некоторые исследования, и я нашел ответ на родственные вопросы, но я не уверен, как и если я могу реализовать что-то вроде этого:

Это беспокоит меня на некоторое время с GMaps v3. Я нашел способ сделать это следующим образом:

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    // do something only the first time the map is loaded 
}); 

«неактивный» событие срабатывает, когда карта переходит в состояние ожидания - все загружены (или не сработал). Я обнаружил, что он более надежный , затем patchloaded/bounds_changed и с использованием метода addListenerOnce код в закрытии выполняется при первом запуске «холостого хода» и , тогда событие отделяется.

Ссылка: How can I check whether Google Maps is fully loaded?

Это моя текущая настройка:

1. Мой Google Maps API ссылка и ключ находится в моем index.html файле:

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXX"></script> 

2. Я использую следующее в качестве моей Угловой Директивы:

'use strict'; 

angular.module('portalDashboardApp') 
    .directive('ogGoogleMap', function ($http, $q) { 
     return { 
      restrict: 'E', 
      scope: { 
       twitter: '=', 
       instagram: '=' 
      }, 
      template: '<div id="gmaps"></div>', 
      replace: true, 
      link: function (scope, element, attrs) { 

       var map, infoWindow; 
       var markers = []; 

       // map config 
       var mapOptions = { 
        center: new google.maps.LatLng(-0.013026, 21.333860), 
        zoom: 3, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       // init the map 
       function initMap() { 
        if (map === void 0) { 
         map = new google.maps.Map(element[0], mapOptions); 
        } 
       } 

       // place a marker 
       function setMarker(map, position, title, content, icon) { 

        if (icon === 'IN') { 
         icon = 'images/instagramMarker.png'; 
        } 
        else { 
         icon = 'images/twitterMarker.png'; 
        } 

        var marker; 
        var markerOptions = { 
         position: position, 
         map: map, 
         title: title, 
         icon: icon 
        }; 

        marker = new google.maps.Marker(markerOptions); 
        markers.push(marker); // add marker to array 

        google.maps.event.addListener(marker, 'click', function() { 
         // close window if not undefined 
         if (infoWindow !== void 0) { 
          infoWindow.close(); 
         } 
         // create new window 
         var infoWindowOptions = { 
          content: content 
         }; 
         infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
         infoWindow.open(map, marker); 
        }); 
       } 

       function deleteCurrentMarkers() { 
        for (var i = 0; i < markers.length; i++) { 
         markers[i].setMap(null); 
        } 
        markers = []; 
       } 

       scope.$watch('instagram', function() { 
        deleteCurrentMarkers(); 
        populateMarkers(scope.twitter, 'TW'); 
        populateMarkers(scope.instagram, 'IN'); 
       }); 

       // show the map and place some markers 
       initMap(); 

       function populateMarkers(locationArray, type) { 

        angular.forEach(locationArray, function (location) { 

         setMarker(map, new google.maps.LatLng(location[0], location[1]), '', '', type); 

        }); 

       } 

      } 
     }; 
    }); 

3. Я использую следующий простой метод присвоения моих данные карт в моем угловом контроллере:

Сначала я получить мои данные:

function pullSocialData() { 

    SocialMediaUserService.getKeywordProfileID().then(function (keywordProfileID) { 

     GetFusionDataService.getItems(getRequestURL(keywordProfileID)) 
      .success(function (data) { 

       formatDataAccordingToLocation(data); 

      }) 
      .error(function (error, status) { 
       handleDataRetrievalError(error, status); 
      }); 

    }); 
} 

двутавровый назначение мои данные:

function formatDataAccordingToLocation(data) { 
    $scope.twitterLocations = data.lat_longs_twitter; 
    $scope.instagramLocations = data.lat_longs_instagram; 
} 

Это то, что мои данные от API выглядит следующим образом:

lat_longs_twitter: [ 
    [ 
    -25.77109, 
    28.09264 
    ], 
    [ 
    -26.1078272, 
    28.2229014 
    ] 
] 

4.Мой HTML карта ДИВ:

<div ng-show="!demographics.showDemographicsGraph"> 
    <og-google-map twitter="twitterLocations" instagram="instagramLocations"></og-google-map> 
</div> 

Когда мои карты нагрузки правильно, это выглядит следующим образом:

Когда он не загружается должным образом, она выглядит следующим образом:

Спасибо заранее!

Answer 1

В функции связи директивы, попробуйте переместить initMap внутри карте idle обратного вызова:

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    // show the map and place some markers 
    initMap(); 
}); 

Answer 2

Чтобы сделать свой груз на карту, я добавил некоторые проверки, чтобы проверить, был ли мой возвращаемые данные перед инициализацией карты. Я также добавил timeOut для хорошей меры, чтобы дать карте больше времени для рендеринга.

Я сделал следующее изменение в моей угловыми Директивы:

scope.$watch('instagram', function() { 
    if (scope.twitter != undefined || scope.instagram != undefined) { 
     initMap(); 
     setTimeout(function() { 
      deleteCurrentMarkers(); 
      populateMarkers(scope.twitter, 'TW'); 
      populateMarkers(scope.instagram, 'IN'); 
     }, 3000); 
    } 
});