Интеграция с Google maps требует много времени для загрузки.

Question

Я использую angular-google-mapss.min.js Требуется много времени для загрузки, и он блокирует всю страницу. Как я могу уменьшить время загрузки? Вот мой код ниже:

  <div flex="100" > 
     <ui-gmap-google-map 
      center='map.center' 
      zoom='map.zoom' 
      aria-label="Google map"> 
     <ui-gmap-marker ng-repeat="marker in markers" 
         coords="marker.coords" 
         options="marker.options" 
         events="marker.events" idkey="marker.id"> 
      <ui-gmap-window> 
      <div> 
       <img class="img-responsive img-circle" ng-src="{{ FILE_SERVER }}sectors/{{marker.window.Pksectorid}}/{{marker.window.Pksectorid}}large.jpeg" err-src="assets/images/img.jpg" /> 
        Shop Name : {{marker.window.title}} - 
        Employees # : <a ui-sref="employees({ sectorid: {{ marker.window.Pksectorid }} })">{{ marker.window.Employeecount }}</a> 
      </div> 
      </ui-gmap-window> 
     </ui-gmap-marker> 
     </ui-gmap-google-map> 
    </div> 

Answer 1

Я нашел ссылку здесь:

https://www.kevinhooke.com/2015/06/15/angularjs-and-google-maps-dynamic-marker-updates/

<ui-gmap-google-map center='map.center' zoom='map.zoom'> 
    <ui-gmap-markers models="markers" coords="'self'" modelsbyref="false"/> 
</ui-gmap-google-map> 

б щ-маркеры Карта вместо УИ-GMAP-маркер с нг-повтора.

Answer 2

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

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
.controller('mainCtrl', function($scope) { 
 
    $scope.map = { 
 
     center: { latitude: 40.1451, longitude: -99.6680 }, 
 
     zoom: 2, 
 
     options: { scrollwheel: false }, 
 
     events: { 
 
       click: function(marker, eventName, model, arguments) { 
 
        var properties = $scope.markers[model.idKey].properties; 
 
        $scope.map.window.coords = model.coords; 
 
        $scope.map.window.title = properties.title; 
 
        $scope.map.window.show = true; 
 
       } 
 
     }, 
 
     window: {} 
 
    }; 
 

 
    $scope.closeClick = function() { 
 
      this.window = false; 
 
    }; 
 

 

 
    var getRandomLat = function() { 
 
     return Math.random() * (180.0) - 90.0; 
 
    }; 
 
    var getRandomLng = function() { 
 
     return Math.random() * (360.0) - 180.0; 
 
    }; 
 

 

 
    var createRandomMarker = function(i) { 
 
     return { 
 
      coords: { latitude: getRandomLat(), longitude: getRandomLng()}, 
 
      options: {}, 
 
      events: {}, 
 
      properties: {title: 'Marker' + i.toString(), Employeecount: 0 }, 
 
      id: i 
 
     }; 
 
    }; 
 

 
    
 
    $scope.markers = []; 
 
    for (var i = 0; i < 100; i++) { 
 
     $scope.markers.push(createRandomMarker(i)); 
 
    } 
 
    
 
    
 
});

.angular-google-map-container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> 
 
<div ng-app="appMaps" ng-controller="mainCtrl"> 
 
     <ui-gmap-google-map 
 
      center='map.center' 
 
      zoom='map.zoom' 
 
      aria-label="Google map"> 
 
     <ui-gmap-marker ng-repeat="marker in markers" 
 
         coords="marker.coords" 
 
         options="marker.options" 
 
         events="map.events" idkey="marker.id"> 
 
     </ui-gmap-marker> 
 
     <ui-gmap-window show="map.window.show" coords="map.window.coords" > 
 
      <div> 
 
       <img class="img-responsive img-circle" ng-src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Mercedes-Benz_Zetros_2008.jpg/1280px-Mercedes-Benz_Zetros_2008.jpg" /> 
 
        Shop Name : {{map.window.title}} - 
 
        Employees # : <a ui-sref="employees({ sectorid: {{ map.window.Pksectorid }} })">{{ map.window.Employeecount }}</a> 
 
      </div> 
 
      </ui-gmap-window> 
 
     </ui-gmap-google-map> 
 
</div>