1

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.

pro
  • 792
  • 7
  • 30
  • 1
    I think what you actually need to do is include that script file outside and before of your angular app so that it's available instead of trying to force it into a directive. – Phillip Chan Dec 14 '16 at 00:43
  • i am loading the api key dynamically. can you elaborate? – pro Dec 14 '16 at 00:46
  • Basically, your google script is loading before your directive. You should look at examples/modules like [angular-google-places-autocomplete](https://github.com/kuhnza/angular-google-places-autocomplete) that have solved such issue. – Taku Dec 14 '16 at 04:46
  • I am facing the same issue but on react js – mohammed_ayaz Dec 06 '20 at 19:15

0 Answers0