CODEWITHSUNDEEP
javascriptc#asp.net-mvcgoogle-mapssetinterval
Brent Theunckens
Brent Theunckens

Reputation: 23

Only update polyline not the whole map

I'm trying to make an ASP.NET page where it is possible to track the route from the current user with the Google Maps API. The problem is whenever I use the interval to draw the polyline the whole Google Map refreshes which results in a flickering page.

Here is my code:

 <script>
    //declare variables
    var interval;
    var coordinates = [];
    var x = document.getElementById("exception");

    //Get current position and loop this
    function getLocation() {
        //Check if the user has a geolocation
        if (navigator.geolocation) {
            interval = setInterval(function () { navigator.geolocation.getCurrentPosition(showPosition); }, 500);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    //Get the latitude and longitude and draw a polylin
    function showPosition(position) {
        console.log(position.coords.latitude + " " + position.coords.longitude);

        //Map options for the Google map and center the current position
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        }

        //Add the options to the google map and display it
        var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

        //Create a marker for the current position
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            title: "Current position!"
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);

        //Add the current coordinates to the array
        coordinates.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

        //Create a polyline with the coordinates array
        var flightPath = new google.maps.Polyline({
            path: coordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        //To add the polylin to the map, call setMap();
        flightPath.setMap(map);
    }

    //Stop the interval
    $("#stop").click(function () {
        clearInterval(interval);
        coordinates = [];
    });
</script>

Thanks in advance, Brent

Upvotes: 0

Views: 545

Answers (1)

Fred
Fred

Reputation: 220

The map is flickering because you are recreating it every time you run showPosition. you should make your map variable global and only set it once at page load. Similarly you should make your marker, and flightPath variable global and be sure that you either remove them from the map before recreating them using marker.setMap(null) and flightPath.setMap(null), or even better just update them with the new position information.

Upvotes: 1

Related Questions