Google Map not loading after page submit

I know there are lot of question regarding the same title, but unfortunately I didn't find a working solution yet, thus I'm posting another.

I'm trying to load simplest google map view and it is not loading at all when page loading or after form submission. however when I refresh the page it is always loading properly.

code :

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

<div class="map-container">
    <div id="map" ></div>
</div>

<style type="text/css">
    .map-container{width: 100%;height: 400px;}
    #map{overflow: hidden;position: relative;width: 100%;height: 100%;}
</style>

<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        minZoom:1,
        center: new google.maps.LatLng(15, 0),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    /* I have already tried this code as well without success 
    google.maps.event.addDomListener(window, 'resize', function() {
        var center = map.getCenter();
        map.setCenter(center);
    });
    google.maps.event.trigger(map, "resize");
    */
</script>

when I checked the console I didn't see any errors, however there is a waing for #no-api-keys, as I'm in developing stage I does not care that much.

Any help would be highly appreciated.

Thanks in advance.