Update Markers without refreshing entire MAP/Page
Question
Ok so I got this.
<?php
$json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
?>
<!DOCTYPE html>
<html>
<head>
<title>SA:MP live map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map-canvas { display: inline-block; height: 800px; width: 800px; }
#map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="js/SanMap.min.js"></script>
<script type="text/javascript">
// POISION DATA
var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;
// MAP TYPE
var mapType = new SanMapType(0, 1, function (zoom, x, y) {
return x == -1 && y == -1
? "images/tiles/map.outer.png"
: "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// SAT TYPE
var satType = new SanMapType(0, 3, function (zoom, x, y) {
return x == -1 && y == -1
? null
: "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// CREATE MAP
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));
// IF ONLINE THEN DO FUNCTION CREATE MARKER
if(p_pos !== "")
{
for (var i = 0; i < Object.keys(p_pos).length; i++)
{
if(p_pos[i].online == 1) createMarker(i);
}
}
// MAKRER FUNCTION
function createMarker(id)
{
var p_marker = new google.maps.Marker({
position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
map: map,
icon: "images/marker.png"
});
}
function updateMarker(id)
{
p_marker.setMap(null);
p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))
}
setInterval(function()
{ "updateMarker" }, 1000);
</script>
</body>
</html>
Using that works but I have to refresh the page to see the updated marker position. What I am trying to do is get the markers to update every second without having to refresh the entire page/map
I added this to the bottom thinking it would make it work
function updateMarker(id)
{
p_marker.setMap(null);
p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))
}
setInterval(function()
{ "updateMarker" }, 1000);
So the total page I have now is this
<?php
$json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
?>
<!DOCTYPE html>
<html>
<head>
<title>SA:MP live map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map-canvas { display: inline-block; height: 800px; width: 800px; }
#map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="js/SanMap.min.js"></script>
<script type="text/javascript">
// POISION DATA
var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;
// MAP TYPE
var mapType = new SanMapType(0, 1, function (zoom, x, y) {
return x == -1 && y == -1
? "images/tiles/map.outer.png"
: "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// SAT TYPE
var satType = new SanMapType(0, 3, function (zoom, x, y) {
return x == -1 && y == -1
? null
: "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// CREATE MAP
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));
// IF ONLINE THEN DO FUNCTION CREATE MARKER
if(p_pos !== "")
{
for (var i = 0; i < Object.keys(p_pos).length; i++)
{
if(p_pos[i].online == 1) createMarker(i);
}
}
// MAKRER FUNCTION
function createMarker(id)
{
var p_marker = new google.maps.Marker({
position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
map: map,
icon: "images/marker.png"
});
}
function updateMarker(id)
{
p_marker.setMap(null);
p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))
}
setInterval(function()
{ "updateMarker" }, 1000);
</script>
</body>
</html>
But its still the same thing, I have to refresh the page to see the updated marker location.
I am so lost in this. Do I have the right idea? Am I putting these in the wrong order? Please help me out
1 answers
solution1
0 2015-11-16 19:27:04
Are you sure about implementation of setInterval() func (you have an error in the syntax)?
Try setInterval(updateMarker, 1000);
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
Also the main point is to use AJAX:
$(document).ready(function(){
setInterval(function(){
$.getJSON('C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json', function(data) {
//alert(data); //uncomment this for debug
p_pos = data;
for (var i = 0; i < Object.keys(p_pos).length; i++) updateMarker(i);
});
}, 1000);
});
http://api.jquery.com/jquery.getjson/
<?php
$json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
?>
<!DOCTYPE html>
<html>
<head>
<title>SA:MP live map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map-canvas { display: inline-block; height: 800px; width: 800px; }
#map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="js/SanMap.min.js"></script>
<script type="text/javascript">
// POISION DATA
var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;
// MAP TYPE
var mapType = new SanMapType(0, 1, function (zoom, x, y) {
return x == -1 && y == -1
? "images/tiles/map.outer.png"
: "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// SAT TYPE
var satType = new SanMapType(0, 3, function (zoom, x, y) {
return x == -1 && y == -1
? null
: "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
});
// CREATE MAP
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));
// IF ONLINE THEN DO FUNCTION CREATE MARKER
if(p_pos !== "")
{
for (var i = 0; i < Object.keys(p_pos).length; i++)
{
if(p_pos[i].online == 1) createMarker(i);
}
}
// MAKRER FUNCTION
var p_marker = new Array();// just global array of markers
function createMarker(id){
p_marker[id] = new google.maps.Marker({ // initializing p_marker array of markers
position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
map: map,
icon: "images/marker.png"
});
}
function updateMarker(id, pos){
p_marker[id].setMap(null);// now it's global, so we can access it from here
p_marker[id].setPosition(SanMap.getLatLngFromPos(pos.x, pos.y))
}
$(document).ready(function(){
setInterval(function(){
$.getJSON('C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json', function(data) {
//alert(data); //uncomment this for debug
p_pos = data;
for (var i = 0; i < Object.keys(p_pos).length; i++) updateMarker(i, p_pos[i]);
});
}, 1000);
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Update Google Maps markers in real time without refreshing entire map
update markers without refreshing page
How can I update markers in gmaps without refreshing the map?
Update map marker without refreshing page - Leaflet
Refreshing contents of a Div without refreshing the entire page
Update without refreshing the page
How to change the link without refreshing the entire page
Refresh an iframe without refreshing the entire page
Submit form data without refreshing entire page
How to reload a component without refreshing the entire page?
Related Tags