How can I update the position of my marker (from SQL database) without reloading the page, or refreshing the map?

Question

I am producing a Google API map where the latitude and longitude positions are being created/read in from an SQL database hosted on PHPMyAdmin.

Each time my GPS module gets a fix, the old location is deleted, and the new location uploaded to the database.

I need the position of my marker to 'move' based on location within the database. This will change with each new 'fix'.

I looked at other threads, some suggest using a refresh tag to reload the page. Others suggest using a

setInterval

function (still in code) to reload the map. These work - however, they produce an unwanted flicker and means the map is unusable in fullscreen mode. It also means that if I wanted to explore the map, I am refreshed to the marker location every 5 seconds.

Instead, I want only the marker to be refreshed/reloaded so it 'moves'. I have seen one answer use AJAX - but I am a beginner, and don't have the background understanding of what AJAX is and how to apply it to my code.

Here is my code:

 function initMap() { /***************************************************************************/ //Creates own marker image for map var ReferencePos = {lat: 52.948616, lng: -1.169131}; /*************************************************** ************************/ var map = new google.maps.Map(document.getElementById('map'), { //center: new google.maps.LatLng(52.948616, -1.169131), center: ReferencePos, zoom: 19 }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP or XML file //downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) { downloadUrl('http://localhost/projectgmaps/map_xml_cycle.php', function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName('marker'); //Stores the data from the database into an array Array.prototype.forEach.call(markers, function(markerElem, idx) { var id = markerElem.getAttribute('id'); var name = markerElem.getAttribute('name'); var address = markerElem.getAttribute('address'); var type = markerElem.getAttribute('type'); var point = new google.maps.LatLng( parseFloat(markerElem.getAttribute('lat')), parseFloat(markerElem.getAttribute('lng'))); //Creates the content windows var infowincontent = document.createElement('div'); var strong = document.createElement('strong'); strong.textContent = name infowincontent.appendChild(strong); infowincontent.appendChild(document.createElement('br')); var text = document.createElement('text'); text.textContent = address infowincontent.appendChild(text); var icon = customLabel[type] || {}; //Creates new marker var marker = new google.maps.Marker({ map: map, position: point, label: icon.label, center: point, icon: 'http://maps.google.com/mapfiles/ms/micons/cycling.png' }); var reference = new google.maps.Marker({ map: map, position: ReferencePos, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', label: 'R' }); marker.addListener('click', function() { infoWindow.setContent(infowincontent); infoWindow.open(map, marker); }); /*************************************************************************************************/ //Centres map on marker if (idx == 0) // first marker, center the map on its position map.setCenter(marker.getPosition()); /*************************************************************************************************/ }); }); } /*************************************************************************************************/ //Refreshes map every 5 seconds so marker updates setInterval ( function(){ initMap(); },5000); /*************************************************************************************************/ function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} 

Note - I have looked at every thread on here that I could find relating to my issue, but most were slightly different, or very confusing answers, so I'm looking for a very clear cut answer to append to my code

Cheers!

Answer 1

Once you've the positions, you can easily reuse the marker object to set positions without refreshing the entire map.

Like:

marker.setPosition({lat: 12.3456, lng: 12.3456}); // Sets the marker to new position  
map.setCenter(marker.getPosition()); // If you want to center the map to the new position  

Now, for the periodic refreshing, I'd suggest you to look at WebSockets