使用 jQuery ajax 定期在谷歌地图上映射标记

Question

I am attempting to populate a google map with a marker periodically. I have an ajax request that fetches a single latitude and longitude co-ordinate and I want it to place this on a map however I am having no luck in doing so.

I can wrap the whole thing in setInterval but this refreshes the whole map which I would prefer not to do due to the "flash".

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);
 }

Any help would be appreciated.

Answer 1

You have two issues:

1. setMap is not a valid MarkerOption
2. the setInterval function doesn't get passed a useful argument.

proof of concept fiddle

code snippet:

 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>