Lỗi hiển thị khi sử dụng Google Map API

Chào mọi người. Mình đang gặp vấn đề Google Map API Mong mọi người giúp đỡ: Mình tạo 1 api như này như khi hiện trên web thì nó đang bị lỗi hiển thị ntn:

Nhưng khi mình Ấn f12 thì nó lại hiển thị được ra ntn :

Có Giúp mình với! Dưới đây là code của mình …

                            var marker;
                            var map;
                            var infowindow;
                            var myLatlng = { lat: $('#Lat').val().length == 0 ? 10.77187 : $('#Lat').val(), lng: $('#Lat').val().length == 0 ? 106.698365 : $('#Lng').val() };
                            console.log(myLatlng);
                          window.onload = function() {
                                //myLatlng = { lat: $('#Lat').val().length == 0 ? 100000 : $('#Lat').val(), lng: $('#Lng').val() };
                                map = new google.maps.Map(document.getElementById('map-canvas'), {
                                    zoom: 18,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                                    center: myLatlng
                                });

                                marker = new google.maps.Marker({
                                    position: myLatlng,
                                    map: map,
                                    icon: '/content/assets/img/icons/shop.png',
                                });

                                google.maps.event.addListener(map, "rightclick", function (event) {
                                    var lat = event.latLng.lat();
                                    var lng = event.latLng.lng();
                                    var markLatLng = marker.getPosition().toUrlValue();
                                    document.getElementById("Lat").value = lat;
                                    document.getElementById("Lng").value = lng;
                                    marker.setPosition(event.latLng);

                                });
                                //search box
                                
                                //End-search-box

                                //marker.addListener('click', function () {
                                //    var shopname = $('#ShopName').val();
                                //    var address = $('#Address').val();
                                //    var cellno1 = $('#CellNo1').val();
                                //    var addressMap = '<strong>' + shopname + '</strong>' +
                                //          '<div class="address">' +
                                //          '<div>Phone: ' + cellno1 + '</div>' +
                                //          '<div>Address: ' + address + '</div>' +
                                //          '</div>';
                                //    if (infowindow) {
                                //        infowindow.close();
                                //    }
                                //    infowindow = new google.maps.InfoWindow({
                                //        content: addressMap
                                //    });

                                //    var position = marker.getPosition();
                                //    console.log(position.lat());
                                //    infowindow.open(map, marker);
                                //});
                           }
                            var moveTo = function (mylat, mylng) {
                                var latlng = new google.maps.LatLng(mylat, mylng);
                                marker.setPosition(latlng);
                                map.setCenter(latlng);
                            }
                            
                        </script>

Thêm sự kiện window.onresize để resize google map

window.onresize= function () {
    google.maps.event.trigger(map, "resize");
}
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?