My google maps only load when i inspectate chrome?

i´m trying to load a google maps using javascript with append. i have a map that is created dinamicly onclick off a div.

but the map doesn´t load properly, it only loads when i inspectate my code.

here is my append code:

   res[0] += "<div id='tab3' class='row'>";
                res[0] +=  "<div id='map'></div>";

                res[0] += "<script type='text/javascript'>";
                res[0] += " function initMap() {";
                res[0] += "var map = new google.maps.Map(document.getElementById('map'), {";
                res[0] += " center: {lat: -34.397, lng: 150.644},";
                res[0] += "scrollwheel: false,";
                res[0] += "zoom: 8";
                res[0] += "});";
                res[0] += "}";
                res[0] += " </script>";
                res[0] += " <script";
                res[0] += " src='http://ift.tt/24rMyc0'>";
                res[0] += "</script>";

                res[0] += "</div>";

i return that res[0] to my append;

this is what i get:

THE MAp only loads if i inspectate chrome! there is any code that i´m missing ? refresh? or something like that?