Race conditions in Google Maps loading - html

Question

I've been having a problem and no amount of googling has led to an answer. I'm building a web application that uses google maps and I keep getting race condition errors after initializing the map. I'm trying to just get the bounds of the map when the page loads, so I can use those boundaries to get data from my API. The problem is that I get incorrect bounds about 20% of the time.
The main things I'm trying to figure out is:
When exactly is a map initialized so I can use it properly?
Is having a fluid map container causing problems?
Is angular.js causing problems for some reason.
The map is assigned to a div called map-canvas which is inside an absolutely positioned map-container
#map-container{
position:absolute;
background-color:#DDD;
top:0px;
bottom:0px;
left:450px;
right:0px;
}
#map-canvas{
width:100%;
height:100%;
}
I'm using jQuery's $(function(){}) method to be notified when the page is loaded. Then I call my initMap() function to initialize the map, where myLatLng is already defined. In order to detect when the map is initialized, I'm adding an 'idle' listener. The autopanning part is for detecting when a user is in the process of dragging the map.
$scope.initMap = function(){
var mapOptions = {
center: myLatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
streetViewControl: false,
mapTypeControl: false
};
$scope.map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener($scope.map, 'idle', function() {
if($scope.autoPanning){
$scope.autoPanning = false;
}else{
$scope.getStories();
}
});
};
In my getStories() method, I get the bounds of the map so I can submit a query to my service. The problem is that latitude_1 will equal latitude_2, giving me essentially a line instead of a box as bounds. This is what I'm currently doing to catch and fix that error:
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var bounds = {
latitude_1 : ne.lat(),
longitude_1 : ne.lng(),
latitude_2 : sw.lat(),
longitude_2 : sw.lng()
};
if(bounds.latitude_1 == bounds.latitude_2){
line("---caught invalid map event---------------------");
google.maps.event.trigger($scope.map, 'resize');
setTimeout(function(){
google.maps.event.trigger($scope.map, "resize");
$scope.map.setCenter(myLatlng);
}, 1000);
return;
}
I'm catching that invalid latitudes issue about 20% of the time, and it's really frustrating. Can anyone shine light on this issue?

Answer 1

I finally figured out what the problem was. It was based on a misunderstanding on my part about the $(document).ready and $(window).load:
$(document).ready is fired when the DOM is ready for interaction.
$(window).load fires when all the page assets are loaded.
So window.load happens after document.ready. I was initializing my app on the document.ready event, when google maps assets weren't fully loaded. I switched my initialization code to happen on the window.load event and it works now.