How update popup info when marker has been moved


I want to show a webpage with a map with a moving marker. the marker is showing a mobile with a app sending their location. I also want to show the mobile battery level and a name in the popup of the marker. I’m moving the marker programatically, using this script:

<script>		  startTimer();
		  function startTimer() {
            timer = setInterval(function() {	
				$.getJSON( "https://myserver.php", function( json ) {
				var speedyPizzaCoordinates2 = [json.results[0].lon, json.results[0].lat];
				marker = new tt.Marker({element: element}).setLngLat(speedyPizzaCoordinates2).addTo(map);
					center: [json.results[0].lon, json.results[0].lat]
            }, 5000);

If I use this code for popup:

var popup = new tt.Popup({offset: popupOffsets}).setHTML(“test battery level”);

Each time my code update the map and the marker, create a new popup. Meaning when I close the popup I have a lot of popup each in front of the other.

How I can replace old popup info/text with new content?

Please any help will be welcome.

Thanks in advance.

It might be hard to help without full code.
I bet that you need to create a popup just after creating a marker.
And you should just call popup.setHTML(“…”) in the callback that is triggered when marker is changed.

1 Like