ReferenceError: google is not defined on reload

Question

I am trying to use the googleplace autocomplete api and ng-map. The problem I run into is after I try to load the map and places with a directive.

I am appending a script tag to the the body tag inside index.html. On first load, the returned google object is available across the app. But then when I reload the page, I get a 'Reference error : google is not defined'.

    app.directive('loadSc', ['apiService'
       function (apiService) {
          return {
             restrict: 'A',

             link: function(scope, element, attrs) {
             var script = document.createElement('script');
                script.src = 'https://maps.googleapis.com/maps/api/js?key=+'apiService.apiKey'+&libraries=places';

             element.append(script);

             }
          };
       }
]);

Most of the solutions I visited have not been helpful.