Маркеры карты на картах Google периодически, используя jQuery ajax

Question

Я пытаюсь периодически заполнять карту Google маркером. У меня есть ajax запрос, который выбирает одну координату широты и долготы, и я хочу, чтобы он поместил это на карту, однако мне не повезло.

Я могу обернуть все это в setInterval, но это обновляет всю карту, что я предпочел бы не делать из-за "fla sh".

HTML

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

JS

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: {lat: 53.810879, lng: -1.740658}
        });

        setInterval(function(map) {
            $.ajax({
                type: "get",
                url: "URL TO REQUEST",
                success:function(data, map)
                {
                    var lat = parseFloat(data.lat);
                    var lng = parseFloat(data.lng);
                    var marker = new google.maps.Marker({
                      position: new google.maps.LatLng(lat,lng),
                      setMap: map,

                    });
                }
            });
        }, 10000);
 }

Любая помощь будет оценена.

Answer 1

У вас есть две проблемы:

1. setMap не является допустимым MarkerOption
2. setInterval функция не передается полезный аргумент.

подтверждение концепции скрипта

фрагмент кода:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {
      lat: 53.810879,
      lng: -1.740658
    }
  });

  setInterval(function() {
    $.ajax({
      type: "get",
      url: "https://staging.yorkshiredalesthepolarexpressride.com/wp-json/pedash/v1/dashboard/tickets",
      success: function(data, map1) {
        console.log(data);
        var lat = parseFloat(data.lat);
        var lng = parseFloat(data.lng);
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          map: map
        });
      }
    });
  }, 10000);
}

/* 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry">
</script>