test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    div {
        width: 80%;
        height: 80%;


    }

    /* 
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
         background-color: #333; 
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover {
        background-color: #ffcccc;
    }

    */
</style>

<body>
    <!-- <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="fifie.html">Five Point</a></li>
        <li><a href="getimagw.html">GeoTag Umage</a></li>
        <li><a href="getimagw.html">Direction</a></li>
        <li><a href="getimagw.html">360</a></li>
        <li><a href="getimagw.html">Interactive Map</a></li>

    </ul> -->
    <div id="map">

    </div>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 36.179260,
                    lng: 44.029574,
                },
                zoom: 15,
                disableDefaultUI: true,

                zoomControl: true,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                rotateControl: false,
                fullscreenControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhn063Enw_pmfiO5jEQVzARv9eptxWloQ&libraries=places&callback=initMap">
        </script>
</body>

</html>