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=";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>

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./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>

• javascript
• angularjs
• google-maps-api-3

• it should call like initMap() insted of initMap – Jigar7521 Commented Nov 14, 2016 at 11:48
• Where should I add the initMap() ? I tired adding in the script tag ! It throws "Failed to load resource: the server responded with a status of 400 () " in the console – Vignesh Commented Nov 14, 2016 at 11:55
• make sure your google map is out of error – Jigar7521 Commented Nov 14, 2016 at 11:59
• Check this: stackoverflow./questions/32090622/… – Dekel Commented Nov 14, 2016 at 12:06
• In this link , they have not given initMap() --for the callback function developers.google./maps/documentation/javascript/tutorial – Vignesh Commented Nov 14, 2016 at 12:39

2 Answers 2

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./maps/api/js?key=AIzaSyAANu_sjcxDH04GZHg187EGg6csTeiX-jw"
     defer></script>

instead of

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

Try adding some css styles to your map id, this happens to me so many times.

html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }

If you need more info read here