Geolocation + Geocoding (NOT WORKING)

<!DOCTYPE html>
<html>
  <head>
    <title>Get Current Location + Address Location</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
        height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
        height: 100%;
        margin: 0;
        padding: 0;
        }

        .custom-map-control-button {
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        margin: 10px;
        padding: 0 0.5em;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
        height: 40px;
        cursor: pointer;
        }
        .custom-map-control-button:hover {
        background: #ebebeb;
        }
    </style>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&channel=2" async></script>

    <script>

    let map, infoWindow;

    function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 12,
    });
    infoWindow = new google.maps.InfoWindow();

    const locationButton = document.createElement("button");

    locationButton.textContent = "Pan to Current Location";
    locationButton.classList.add("custom-map-control-button");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
    locationButton.addEventListener("click", () => {
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
            const pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
            };

                var marker = new google.maps.Marker({map: map, position: pos, clickable: true});

                function showPosition(position) {
                    var lat = position.coords.latitude;
                    var lang = position.coords.longitude;
                    var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lang +"&key=YOUR_API_KEY";

                    fetch(url).then(r => r.json())
                    .then(data => console.log(data))
                    .catch(e => console.log("Booo"))
                }

                marker.info = new google.maps.InfoWindow({
                content: "Your Location: Latitude " + position.coords.latitude +" dan Longitude "+ position.coords.longitude +
                         "<br> Your Address is: " + showPosition(position)

                });

                google.maps.event.addListener(marker, 'click', function() {
                marker.info.open(map, marker);
                });

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

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
        browserHasGeolocation
        ? "Error: The Geolocation service failed."
        : "Error: Your browser doesn't support geolocation."
    );
    infoWindow.open(map);
    }

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