googleMaps.html

<html>
<head>

    <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtQLxQ7YVodxMugi0DMPBk2QxShYR9blE&libraries=geometry&callback=initMap"
            async defer>
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map">
</div>
<script>
    /**
     *Settings used to load Goodgle Maps
     */
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -27.480253, lng: 153.035431},
            disableDefaultUI: true,
            zoom: 14
        });

        /**
         * Geolocation
         * Finding location
         */
        var pos;
        var infoWindow = new google.maps.InfoWindow({map: map});
        // Try HTML5 geolocation.

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                /**
                 * Placing a marker
                 * @type {google.maps.Marker}
                 */

                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    icon: 'marker_man.png',
                });


                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }


</script>
</body>
</html>