initMap is not a function: Error

Question

GoogleMap is not visible in my angular Project (WebStorm IDE) !!

I have tried using callback function !! Still the GoogleMap is not visible !! I get this Error in Console

---

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAANu_sjcxDH04GZHg187EGg6csTeiX-jw&callback=initMap"
         defer></script>

MapCtrl.js

 .controller('MapCtrl',function ($scope, $window) {

$window.initMap = function () {

    var map=new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });

  }

});

Mymap.html

<div id="map" ng-controller="MapCtrl"></div>

Answer 1

I had the same problem once. I solve it by removing '&callback=initMap' from the end of the src url. In your case;

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAANu_sjcxDH04GZHg187EGg6csTeiX-jw"
     defer></script>

instead of

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAANu_sjcxDH04GZHg187EGg6csTeiX-jw&callback=initMap"
     defer></script>