Google maps integration takes a lot of time to load.

Issue

I am using angular-google-maps.min.js It takes a lot of time to load and it blocks the whole page.how can i reduce the load time? Here is my code below:

         <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>

Solution

I found the reference here :

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>

Used ui-gmap-markers instead of ui-gmap-marker with ng-repeat.

Answered By - Sangeetha Pelluri