Google Maps API current location constantly update

Question

I am integrating Google Maps API into an application and Google Maps API requires my current location.

I can provide my current location as expected, but how do I get it dynamically updated with my live location?

This is my code:

@push('scripts')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initMap" async defer></script>
<script>
    // Loading in google maps
    function initMap() {
        let spain = {lat: 40.4637, lng: -3.7492};
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: spain
        });

        let infoWindow = new google.maps.InfoWindow;
        let markers = {!! $markers->toJson() !!};

        let hotspotLoc = {
            lat: Object.values(markers)[0].lat,
            lng: Object.values(markers)[0].lng
        };
        map.setCenter(hotspotLoc);

        // Loading in Markers from the database
        $.each(markers, function (key, marker) {
            let id = marker.id;
            let name = marker.name;
            let addres = marker.addres;
            let lesson = 0;
            if (marker.lesson && marker.lesson.length > 0) {
                lesson = marker.lesson[0].id;
            }

            let lat = marker.lat;
            let lng = marker.lng;
            let type = marker.type;

            let markerLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            let mark = new google.maps.Marker({
                position: markerLatlng,
                map: map,
                lesson: lesson,
            });


            new google.maps.event.trigger(markers, 'click');

            mark.setMap(map);
        });
    }

    function handleLocation(browserGeoLocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeoLocation ? 'Error: The Geolocation service has failed!' :
            'Error: Your browser doesn/t support Geolocations!');

        infoWindow.open(map);
    }

    function disableLesson() {
        const listOfLesson = $(".lockLesson:not(.disabled)").slice(1);
        listOfLesson.each(function() {
            $(this).addClass('disabled');
            //$(this).find('.d-flex .btn-dark').append('<div class="fas fa-lock fa-lg mx-2"></div>');
            $(this).find('.d-flex .d-none').removeClass("d-none");
        });
    }

    $(() => {
        disableLesson();
    });
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtqWsq5Ai3GYv6dSa6311tZiYKlbYT4mw&callback=initMap">
</script>

@endpush

Hopefully someone knows how to make it updatable so I can proceed my project.

Answer 1

You have to use setInterval javascript function

            // call funtion to get and set location
            setInterval(function () {
                // Call function get and set location
            }, 5000);

Reference: https://gist.github.com/pawel-dubiel/3714643/36d78efa85fa413fff79669423de5ec08c77e34c