Loading google maps asynchronously - google-maps

Question

I am trying to load my google map asynchronously and it works but it is loading the map in twice. If I remove "box.onload = initialize;" this stops that problem but then the infobox doesn't show...how do I fix my code so it only loads the map once AND shows the infobox.
function loadScript() {
var map = document.createElement('script');
map.type = 'text/javascript';
map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
document.body.appendChild(map);
map.onload = function() {
var box = document.createElement('script');
box.type = 'text/javascript';
box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
document.body.appendChild(box);
box.onload = initialize;
};
}
window.onload = loadScript;

Answer 1

The map appears twice because you're calling initialize twice.
Before fixing that, let's simplify your code a bit. Never let yourself repeat blocks of code like that; instead make it into a common function.
Also, don't load infobox.js from googlecode.com; Google Code is not a CDN. Load your own copy.
So, the code may look like this:
function addScript( url, callback ) {
var script = document.createElement( 'script' );
if( callback ) script.onload = callback;
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
}
function loadMapsAPI() {
addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}
function mapsApiReady() {
addScript( 'infobox.js', initialize );
}
window.onload = loadMapsAPI;

Answer 2

I created this script. You can call this and add any callback function, so you have to just include this to your scripts and call
googleMapsLoadAsync(function(){ alert('google maps loaded'); });
script
var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };
function googleMapsLoadAsync(callback) {
if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }
if(!googleMapsAsyncLoaded) {
$.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');
} else {
googleMapsAsyncLoadedFunction();
}
}
function googleMapsAsyncLoadedFunction() {
googleMapsAsyncLoaded = true;
if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {
googleMapsAsyncCallback();
}
googleMapsAsyncCallback = function(){ };
}