Menu
Here I want to update the init() function for every three sec by getting the values. I'm sending those parameters from another application. I have to use AJAX to update the location point. so now how to do it? How can I get values from application and update the position in given time intervals?
<!DOCTYPE html>
<html>
<head>
<title>Track Page</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=(I pasted my java script embed API KEY here)&callback=initMap"
async defer></script>
<script>
var marker;
var u_lat,u_lng;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: u_lat, lng: u_lng},
zoom: 8
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title:'User',
position: {lat: u_lat, lng: u_lng}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</body>
</html>
EDIT Can I write the script in this way
<script>
var http=new XMLHttpRequest();
var url="jsontext.txt";
var marker;
var user_lat,user_lng;
function initMap() {
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var coordinates=JSON.parse(http.responseText);
user_lat=coordinates.latitude;
user_lng=coordinates.longitude;
}
}
http.open("GET",url,true);
http.send();
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: user_lat, lng: user_lng},
zoom: 8
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
label:'Driver1',
position: {lat: user_lat, lng: user_lng}
});
}
</script>
544
asked Sep 09 '26 05:09
You can use the setTimeout and clearTimeout functions.
timer = setTimeout(function(){
// Do the ajax call
}, 3000);
With this function you can set a timeout for your ajax call and do all the stuff you need.
When you're done or when an error occurs or when you need to reset the timer or whatever... You can use the clearTimeout(timer) in order to remove the timer.
* EDIT *
This is the workflow you need:
Init function
the init function creates a timer that makes an ajax call to a controller (see Controller) that returns a JSON format you can work on.
example:
$.ajax({
url: 'my/url/to/action.php',
type: 'POST', // Use always POST for security purposes
data: {
parameter1: value1,
parameter2: value2, // These are the parameters passed to the controller
parameter3: value3,
},
dataType: 'json',
complete: function (jqXHR, textStatus) {
// something to do on ajax request completed
},
success: function (response) {
// Refresh the marker with the values returned on the response
},
error: function (jqXhr, textStatus, errorThrown) {
// something to do if the controller returns error
}
});
Controller
This is the backend part, where you need a web service that returns the value you need in a JSON format.
You can easily find many tutorials on google on how to make an ajax call to a PHP controller for example... I hope this is what you're looking for
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
