title: How can I force Google Maps to load in my Angular app using an Angular Directive
body: <p>I have an issue where my Google Map does not display 80% of the time. It seems to be a situation where my map has not completely rendered by the time the rest of my data has been populated in my Angular view.</p>
  
  <p><strong>How can I force my map to load?</strong> </p>
  
  <p>I have done some research, and I have found this answer on a related questions, but I am not sure how and if I can implement something like this:</p>
  
  <blockquote>
    <p>This was bothering me for a while with GMaps v3. I found a way to do
    it like this:</p>
  
  <pre><code>google.maps.event.addListenerOnce(map, 'idle', function(){
      // do something only the first time the map is loaded
  });
  </code></pre>
    
    <p>The "idle" event is triggered when the map goes to idle state -
    everything loaded (or failed to load). I found it to be more reliable
    then tilesloaded/bounds_changed and using addListenerOnce method the
    code in the closure is executed the first time "idle" is fired and
    then the event is detached.</p>
    
    <p>Link: <a href="https://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded">How can I check whether Google Maps is fully loaded?</a></p>
  </blockquote>
  
  <p><strong>This is my current setup:</strong></p>
  
  <p><strong>1. My Google Maps API link and key is in my index.html file:</strong></p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXX"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>2. I use the following as my Angular Directive:</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('portalDashboardApp')
    .directive('ogGoogleMap', function ($http, $q) {
        return {
            restrict: 'E',
            scope: {
                twitter: '=',
                instagram: '='
            },
            template: '&lt;div id="gmaps"&gt;&lt;/div&gt;',
            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 &lt; 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);
  
                    });
  
                }
  
            }
        };
    });
  </code></pre>
  
  <p><strong>3. I use the following simple method of assigning my map data in my Angular Controller:</strong></p>
  
  <p><strong>First I retrieve my data:</strong></p>
  
  <pre><code>function pullSocialData() {
  
      SocialMediaUserService.getKeywordProfileID().then(function (keywordProfileID) {
  
          GetFusionDataService.getItems(getRequestURL(keywordProfileID))
            .success(function (data) {
  
                formatDataAccordingToLocation(data);
  
            })
            .error(function (error, status) {
                handleDataRetrievalError(error, status);
            });
  
      });
  }
  </code></pre>
  
  <p><strong>The I assign my data:</strong></p>
  
  <pre><code>function formatDataAccordingToLocation(data) {
      $scope.twitterLocations = data.lat_longs_twitter;
      $scope.instagramLocations = data.lat_longs_instagram;
  }
  </code></pre>
  
  <p><strong>This is what my data from the API looks like:</strong></p>
  
  <pre><code>lat_longs_twitter: [
      [
      -25.77109,
      28.09264
      ],
      [
      -26.1078272,
      28.2229014
      ]
  ]
  </code></pre>
  
  <p><strong>4. My HTML map div:</strong></p>
  
  <pre><code>&lt;div ng-show="!demographics.showDemographicsGraph"&gt;
      &lt;og-google-map twitter="twitterLocations" instagram="instagramLocations"&gt;&lt;/og-google-map&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When my map loads properly, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DHnDH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DHnDH.jpg" alt="enter image description here"></a></p>
  
  <p>When it doesn't load properly it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Hemrn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hemrn.jpg" alt="enter image description here"></a></p>
  
  <p>Thank you in advance!</p>