How do I add google map in angular.js controller?

Question

So, I'm fairly new to angular and having hard time implementing google map API. I keep getting error:

Uncaught InvalidValueError: initialize is not a function.

I have this for the script tag:

<script src="https://maps.googleapis.com/maps/api/js?key=MY API KEY GOES HERE&callback=initialize"
    async defer></script>

But since my function initialize() is inside my controller, it doesn't recognize it. If I put the function outside of the controller, it does recognize it. But since I have all the data defined within the controller, I need this inside it. I'm not even sure what I'm supposed to ask but I just need to get the map to show up. Any ideas?

I think this is a double of [this](http://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function) — rick, Apr 15 '16 at 06:48
Could you explain this in easier terms? I read it a couple of times and still having hard time. — inertia, Apr 15 '16 at 06:50
I think you should add libraries of geometry and places so you can see places — ojus kulkarni, Apr 15 '16 at 06:56

score 10 · Accepted Answer · answered Apr 15 '16 at 09:29

10

You could consider to load Google Maps API synchronously as demonstrated below

angular.module('myApp', [])
    .controller('MyCtrl', function($scope) {
      
       $scope.initialize = function() {
          var map = new google.maps.Map(document.getElementById('map_div'), {
             center: {lat: -34.397, lng: 150.644},
             zoom: 8
          });
       }    
       
       google.maps.event.addDomListener(window, 'load', $scope.initialize);   

    });

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}
#map_div {
        height: 480px;
}

 <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js" ></script>
 <div ng-app="myApp" ng-controller="MyCtrl">
   <div id="map_div"></div>
 </div>

answered Apr 15 '16 at 09:29

Vadim Gremyachev

57,952
20
129
193

@AlexP, via query string, for example: `https://maps.googleapis.com/maps/api/js?key=-YOUR-KEY-GOES-HERE- ` – Vadim Gremyachev Jun 17 '17 at 20:13
So I need to put ` ` into the main page (the one that contains `
` ? Because I have still the same error described here even after implementing your solutin – AlexP Jun 17 '17 at 20:18
@AlexP, that's right, but **without** `callback` parameter, in my case google map is getting initialized once the page is loaded: `google.maps.event.addDomListener(window, 'load', $scope.initialize); ` – Vadim Gremyachev Jun 17 '17 at 20:28
is it possible to refresh manually from Controller and ask to load it when I need it and not on page load? As I still have no effect :( – AlexP Jun 17 '17 at 20:41
UPD: it appeared only once and doesn't want to reappear after refresh of whole page – AlexP Jun 17 '17 at 20:47
1

Thanks. I have managed to achieve my goal by assigning new `map` every time I wanted to refresh it. `$window.map=map;` . Your comments helped me a lot! – AlexP Jun 18 '17 at 13:13

score 0 · Answer 2 · edited Apr 15 '16 at 08:37

0

You have to read this documentation and use simple googlemap angularjs directive.

I hope this works for you

All The best

edited Apr 15 '16 at 08:37

saw303

8,051
7
50
90

answered Apr 15 '16 at 06:58

Chetan Buddh

452
8
14

How do I add google map in angular.js controller?

2 Answers2

Linked