Map Marker refresh/Update without refreshing whole map

Question

I cannot figure out how to edit this to make it so the map does not refresh but it continues to refresh the marker to get the updated positions.

the positions are coming from this line

<?php

$json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
     ?>

right there

<?php

$json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
     ?>

<!DOCTYPE html>
 <html>
<head>
    <meta http-equiv="refresh" content="1" />
    <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">
        var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;

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

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

        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(p_pos !== "")
        {
            for (var i = 0; i < Object.keys(p_pos).length; i++) 
            {
                if(p_pos[i].online == 1) createMarker(i); 
            }
        }   

        google.maps.event.addListener(map, 'click', function(event) {
            var pos = SanMap.getPosFromLatLng(event.latLng);
            console.log(pos.x + "," + pos.y);
        }); 

        function createMarker(id)
        {
            var p_windows = new google.maps.InfoWindow({
                content: "<p>"+p_pos[id].name+" <b>(ID: "+id+")</b><br>Ping: "+p_pos[id].ping+"</p>"
            });

            var p_marker = new google.maps.Marker({
                position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
                map: map,
                icon: "images/marker.png"
            });

            google.maps.event.addListener(p_marker, 'click', function() {
                p_windows.open(map,p_marker);
            });
        }
    </script>
</body>

Answer 1

Remove the top header line: <meta http-equiv="refresh" content="1" /> to disable refresh the page. And then add a setInterval function to get the new data from your php service, in the call back --

first use marker.setMap(null) to clear the previous marker and then call your CreateMarker(id).

Or

you can write an updateMarker(id) function, and use marker.setPosition() to update the location.

These are generally idea for you to implement your own code.

Map Marker refresh/Update without refreshing whole map

Question

1 answers

solution1
0 2015-11-16 03:40:09

Map Marker refresh/Update without refreshing whole map

Question

1 answers

solution1 0 2015-11-16 03:40:09

solution1
0 2015-11-16 03:40:09