МАРКЕР МАРКЕТРА в реальном времени Позиция на основе MYSQL базы данных

Question

Итак, я сейчас создаю веб-сайт, который может показывать позицию пользователя в Google Maps в реальном времени.

• Положение пользователя отправляется по GPS в базу данных mysql.
• В моей базе данных есть ТАБЛИЦА с именем location_tab.
• В location_tab есть 3 столбца: locationLatitude, locationLongitude, ID.

Так что это мой КОД:

    <!-- Begin Page Content -->
    <div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-4 text-gray-800"><?php echo $title; ?>
        <!--// sama aja kayak < ? php = $title; ?> -->
    </h1>
    <!--isi konten-->
    <p id="userTemukanMotorSaya">Pemilik:<br><?= $user['name']; ?></p>
    <?php
    /* Database connection settings */
    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'wpu_login';
    $mysqli = new mysqli($host, $user, $pass, $db) or die($mysqli->error);

    $coordinates = array();
    $latitudes = array();
    $longitudes = array();

    // Select all the rows in the markers table
    $query = "SELECT  `locationLatitude`, `locationLongitude` FROM `location_tab` ";
    $result = $mysqli->query($query) or die('data selection for google map failed: ' . $mysqli->error);

    while ($row = mysqli_fetch_array($result)) {

        $latitudes[] = $row['locationLatitude'];
        $longitudes[] = $row['locationLongitude'];
        $coordinates[] = 'new google.maps.LatLng(' . $row['locationLatitude'] . ',' . $row['locationLongitude'] . '),';
    }

    //remove the comaa ',' from last coordinate
    $lastcount = count($coordinates) - 1;
    $coordinates[$lastcount] = trim($coordinates[$lastcount], ",");
    ?>




    <div class="div-map">
        <div class="row">
            <form class="form-horizontal" action="" method="post" name="frmCSVImport" id="frmCSVImport" enctype="multipart/form-data">

            </form>
        </div>

        <div id="map" style="width: 100%; height: 80vh;"></div>

        <script>
            function initMap() {
                var mapOptions = {
                    zoom: 18,
                    center: {
                        <?php echo 'lat:' . $latitudes[$lastcount] . ', lng:' . $longitudes[$lastcount]; ?>
                    }, //{lat: --- , lng: ....}
                    mapTypeId: google.maps.MapTypeId.SATELITE
                };

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

                var RouteCoordinates = [
                    <?php
                    $i = 0;
                    while ($i < count($coordinates)) {
                        echo $coordinates[$i];
                        $i++;
                    }
                    ?>
                ];

                var RoutePath = new google.maps.Polyline({
                    path: RouteCoordinates,
                    geodesic: true,
                    strokeColor: '#1100FF',
                    strokeOpacity: 1.0,
                    strokeWeight: 10
                });

                titikAwal = '<?= base_url('assets/img/map/'); ?>titikAwal.png';
                titikAkhir = '<?= base_url('assets/img/map/'); ?>titikAkhir.png';

                startPoint = {
                    <?php echo 'lat:' . $latitudes[0] . ', lng:' . $longitudes[0]; ?>
                };
                endPoint = {
                    <?php echo 'lat:' . $latitudes[$lastcount] . ', lng:' . $longitudes[$lastcount]; ?>
                };

                var marker = new google.maps.Marker({
                    position: startPoint,
                    map: map,
                    icon: titikAwal,
                    title: "Pelacakan : Posisi awal",
                    animation: google.maps.Animation.DROP
                });

                var marker = new google.maps.Marker({
                    position: endPoint,
                    map: map,
                    icon: titikAkhir,
                    title: "Pelacakan : Posisi akhir",
                    animation: google.maps.Animation.DROP,
                    animation: google.maps.Animation.BOUNCE
                });

                RoutePath.setMap(map);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

        <!--remenber to put your google map key-->
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-dFHYjTqEVLndbN2gdvXsx09jfJHmNc8&callback=initMap"></script>



        </html>
        <!--isi konten **END**-->

    </div>
    <!-- /.container-fluid -->



</div>
<!-- End of Main Content -->

Код выполняется безупречно, но затем я обнаружил НЕКОТОРЫЕ ПРОБЛЕМЫ: Маркер не обновляется в РЕАЛЬНОМ ВРЕМЕНИ на основе новых данных, хранящихся в MYSQL DATABASE , так что я Я должен перезагрузить страницу, чтобы получить обновленный МАРКЕР.

Я попытался сделать AJAX, сделав страницу, содержащую MAPS, с именем "maps. php", затем загрузите "maps . php "используя этот код:

<div id="show"></div> <!--show data-->
<script type="text/javascript" src="<?= base_url('assets/js/'); ?>jquery-3.4.1.min.js">
        </script>
        <!-- KUNCI AUTO REFRESH JQUERY AJAX-->
        <script type="text/javascript">
            $(document).ready(function() {
                setInterval(function() {
                    $('#show').load('maps.php')
                }, 100);
            });
        </script>

Таким образом, для результата MAPS перезагружается каждые 100 мс, а не MARKER

Так что мой вопрос, как получить MAPS Положение МАРКЕРА обновляется каждые 100 мс?