bing map loading only after resizing the window

Question

I am not really good at js and trying to use Bing map in our website but it shows the map few times and doesnt show the map most of the time. Below is the code snippet of loading map function, can someone please let me know whats wrong in this function, I am using this from other application:

 function loadMap(storeData) {
        var coordinates = {};
        var map;
        var stores = storeData.stores;
        if( (typeof stores !== 'undefined') && (typeof stores[0].coordinates !== 'undefined') ) {
          coordinates.lat = stores[0].coordinates.lat;
          coordinates.lng = stores[0].coordinates.lng;
        }else {
          coordinates.lat = 33.74831008911133;
          coordinates.lng = -84.39111328125;
        }

        map = new Microsoft.Maps.Map($('#bingMap')[0], {
          credentials: 'mykey',
          liteMode: true,
          enableClickableLogo: false,
          center: new Microsoft.Maps.Location(coordinates.lat, coordinates.lng)
        });

        self.center = new Microsoft.Maps.Location(coordinates.lat, coordinates.lng);        
        map.setView({zoom: 13});

        return map;
      }

I have tried below few steps I got from other stackoverflow queries but it didnt help me:-(

setTimeout(this.loadMap(storeData), 2000);  Microsoft.Maps.Events.addHandler(map,'resize')

Answer 1

The problem is in your setTimeout call:

You see, setTimeout receives 2 parameters:

1. A function to execute
2. Timeout in ms

in your case, you used setTimeout(this.loadMap(storeData), 2000); which doesn't pass the function to the setTimeout but the result of the execution. In addition, this code will also execute this.loadMap immediately and not in 2 seconds.

To solve this, you can just use:

setTimeout(function() { this.loadMap(storeData)}, 2000);

or: (@Sysix's solution) setTimeout(this.loadMap.bind(this), 2000, storeData);