El mapa de Google no está completamente cargado cuando abro el elemento de inspección, funcionará

He integrado un mapa de Google en mi sitio web, pero cuando abro, el mapa de elementos de inspección funcionará y cuando cierre el mapa desaparecerá. Por favor déjame saber cuál es el problema

antes de

Después de abrir inspeccionar el elemento.

El código está aquí

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>

<body>


    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {
            var $latitude = document.getElementById('latitude');
            var $longitude = document.getElementById('longitude');
            var latitude = -25.363882;
            var longitude = 131.044922;
            var zoom = 7;

            var LatLng = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

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


            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag Me!',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });


        }
        initialize();
    </script>

</body>

</html>

Respuestas a la pregunta(3)

Su respuesta a la pregunta