google map not load using javascript

Question

I have posted my code but map is not load.please suggestion to this question. i will also use google map js but can't load.

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
     if($('.map-container:visible').length >= 0) 
     {       
        initMap();
     }
    function initMap(){
        google.maps.visualRefresh = true;

      var myLatlng = new google.maps.LatLng('24.980832' ,'55.092480'); 

      var mapOptions = {
             zoom: 10, 
             center: myLatlng,
             mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('dubaiTradeNew'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Dubai Trade'
        });

            google.maps.event.addDomListener(window, "resize", function() { 
            var center = map.getCenter(); 
            google.maps.event.trigger(map, "resize"); 
            map.setCenter(center);  
        });   
    }

Answer 1

Please try adding height width once

<div class="map-container" id="dubaiTradeNew" style="height:100px;width:100px">
</div>

And Set different scripts

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
    //Code here
</script>