Google Maps is not loading data

Question

I'm working with some project where I must use Angular. It's my first contact with this framework so I can make some mistakes.

I created function initMap() which was called by Google Maps API callback (parameter &callback=initMap in <script src="..">.. when I call for Google API's file).

My function initMap() waiting for bag variable values - it's global variable which contains cities which I want to use as markers. I know that it's really bad practice, but I spend a lot of time to get data from Angular scope - but I'm noob and I can't do it. Let's move on - when I receive data I'm creating new object via

var map = new google.maps.Map(document.getElementById('map'), mapOptions)

After that I'm waiting for idle event and then I put markers on my map.

google.maps.event.addListenerOnce(map, 'idle', function() {
    // Put markers
});

And here is a magic - SOMETIMES map isn't load. I receive gray box, Google logo in bottom-left corner and nothing more. When I put console.log(..) in this listener I receive in console my log message.

When I do hard refresh (for example Ctrl + F5) then everything is working fine (always).

My first idea is to remove defer from script tag (because in FireBug Network I can see very long load analitycs script) - but it doesn't help me.

And really please - don't spam with comments like "noob,don't use global variables". If it can't help me - please don't do a mess.

Regards

Let me know if you are able to fix your problem with my answer. — AndreaM16, Sep 16 '16 at 08:13

score 0 · Answer 1 · edited May 23 '17 at 12:15

If you are using AngularJS you can init your map trough ng-init="MapController.initMap()".

Anyways, you need to share more code because it's impossible to understand which is the problem from here.

You should kick-start an AngularJS Google Maps App like:

HTML:

<html ng-app="mapApp">
 . . .
  <body ng-controller="MapController" ng-init="MapController.initMap()">
    <div id="map"></div>
  </body>
</html>

JS:

angular.module('mapApp', []);

angular
  .module('mapApp')
  .controller('MapController', MapController);

  function MapController(){

  var vm = this;

     vm.initMap = function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: new google.maps.LatLng(32.483, 16.084)
        });
     }
   }

CSS:

#map{
      height: 400px;
      width:  700px;
 }

Here You can find a Plunker I made with the code Above. It really never freezes or cause issues like yours.
Now, you can also initialize it with a directive. Take a look at this answer of mine about initializing it with a directive with Its Plunker.
And Finally, Here you can Find another Plunker I made to add n markers to your map and make them clickable (showing information).

I hope I've been helpful.

Google Maps is not loading data

1 Answers1