Timing / Order of Script Loading
===

I'm working with Google Maps and am having an issue that comes down to timing, I think... specifically of when to load the script for Google Maps' API.

I am getting:

    Uncaught ReferenceError: google is not defined 

 However, if I look at the Google object in the console, it shows up just fine.

Is the script for the API not completely loaded yet before I try to use it?

Also, I have this main script (below) loading with the 'defer' attribute, though I don't think that should be an issue.

What am I missing?

Thanks in advance.



    var inrMap = {
    	map : null,
    	markers : [],
    
    	addCoords : function(){
    		var regex1 = /\s/;
    		var regex2 = /\./;
    		for(var i in inrMap.locations){
    			var address = inrMap.locations[i].address;
    			address = address.replace(regex1, '+');
    			address = address.replace(regex2, '');
    			$.ajax({
    				data : 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=false',
    				dataType : 'json',
    				type : 'get',
    				success : function(data, textStatus, xhr){
    					inrMap.locations[i].lat = data.geometry.location.lat;
    					inrMap.locations[i].lng = data.geometry.location.lng;
    				},
    				error : function(xhr, textStatus, errorThrown){
    					//console.error('problem with geocoding service...');
    				}
    			});		
    		}
    	},
    
    	generateMap : function(){
            var map_options = { center : new google.maps.LatLng(-34.397, 150.644), zoom : 8, mapTypeId : google.maps.MapTypeId.ROADMAP };
            inrMap.map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
    		//load markers
    		for(var i in inrMap.locations){
    			var position = new google.maps.LatLng(inrMap.locations[i].lat, inrMap.locations[i].lng);
    			inrMap.markers[i] = new google.maps.marker(position, inrMap.locations[i].title);		
    			inrMap.markers[i].setMap( { map : inrMap.map, draggable : false, animation : google.maps.Animation.DROP } );
    		}
    	},
    
    	bindMarkers : function(){
    		// $(inrMap.markers).each(function(){
    		// 	this.bind('click', function(){
    		// 		//create new info window
    		// 		var location_name = this.id; // ***** this needs to be fixed ******
    		// 		var iw = new google.maps.InfoWindow( { content : this.id.title, maxWidth : '300' } );
    		// 	})
    		// });
    	},
    
    	bindForm : function(){
    
    	} 
    }
    
    inrMap.locations = {
    			jacksonville : {
    				title : 'jacksonville',
    				address : '4651 Salisbury Rd. Suite 170, Jacksonville FL 32256',
    				phone : '(904) 398-0155',
    				link : '/location/florida-regional-office',
    				marker : null
    			},
    			miami : {
    				title : 'Miami',
    				address : '15050 NW 79 Court Suite 104, Miami Lakes FL 33016',
    				phone : '(305) 403-0594',
    				link : '/location/florida-regional-office',
    				marker : null
    			}

    etc...


    
    																									
    }
    
    //load google maps js
    var gmaps_script = document.createElement('script');
    gmaps_script.type = 'text/javascript';
    gmaps_script.src = 'http://maps.googleapis.com/maps/api/js?key=*****&sensor=false';  
    $('body').append(gmaps_script);
    
    $(function(){
    
    //check if locations object is not in local storage (and thus does not have coordinates)
    if(!localStorage.getItem('inr_locations')){
    	//get lat & long, add to locations obj
    	inrMap.addCoords();
    	//save object
    	//localStorage.setItem('inr_locations', inrMap.locations);
    }
    else{
    	//pull locations object from local storage
    	//inrMap.locations = localStorage.getItem('inrMap.locations');
    }
    
    //create element to place map in
    var map_canvas = document.createElement('div');
    $(map_canvas).attr('id', 'map_canvas').appendTo('#content');
    
    //generate map
    inrMap.generateMap();
    
    //bind events to map markers
    //inrMap.bindMarkers();
    
    //bind events to form / links
    //inrMap.bindForm();
    
    });