Loading google maps asynchronously -

i trying load google map asynchronously , works loading map in twice. if remove "box.onload = initialize;" stops problem infobox doesn't show...how fix code loads map once , shows 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; 

the map appears twice because you're calling initialize twice.

before fixing that, let's simplify code bit. never let repeat blocks of code that; instead make common function.

also, don't load infobox.js googlecode.com; google code not cdn. load own copy.

so, code may 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;