Question

57

Geolocation: moving only google maps marker without reload the map

rated 0 times [ 59] [ 2] / answers: 1 / hits: 24367 / 11 Years ago, thu, april 25, 2013, 12:00:00

I need to update only the marker when the device is moving or when the device is getting more accuracy. When the position change also reload the map and I need to move only the maker. I have the following code:

if (navigator.geolocation) {

    navigator.geolocation.watchPosition(



    function(position){

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    var accuracy = position.coords.accuracy;

    var coords = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {

        zoom: 20,

        center: coords,

        streetViewControl: false,

        mapTypeControl: false,

        navigationControlOptions: {

            style: google.maps.NavigationControlStyle.SMALL

        },

        mapTypeId: google.maps.MapTypeId.ROADMAP

        };



     var capa = document.getElementById(capa);

     capa.innerHTML = latitud:  + latitude +  longitud:  +    aquesta es la precisio en metres  :   + accuracy;  



        map = new google.maps.Map(

            document.getElementById(mapContainer), mapOptions

            );

        var marker = new google.maps.Marker({

                position: coords,

                map: map,

                title: ok

        });





    },function error(msg){alert('Please enable your GPS position future.');  



  }, {maximumAge:0, timeout:5000, enableHighAccuracy: false});



}else {

    alert(Geolocation API is not supported in your browser.);

}

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

markusdamienn

Add To Favorites

Follow

Total Points: 167

Total Questions: 119

Total Answers: 93

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 11 Years ago dequant · Accepted Answer

I believe that the problem is that you create a new map inside the watchPosition function. You only need to create one marker and then update its position inside the watchPosition function.

navigator.geolocation.watchPosition(

    function (position) {

        setMarkerPosition(

            currentPositionMarker,

            position

        );

    });



function setMarkerPosition(marker, position) {

    marker.setPosition(

        new google.maps.LatLng(

            position.coords.latitude,

            position.coords.longitude)

    );

}

Maybe this example will help you:

<!doctype html>

<html lang=en>



    <head>

        <title>Google maps</title>

        <script src=http://code.jquery.com/jquery-1.8.2.min.js></script>

        <script type=text/javascript src=http://maps.google.com/maps/api/js?v=3&sensor=false&language=en></script>

        <script type=text/javascript>



            var map,

                currentPositionMarker,

                mapCenter = new google.maps.LatLng(40.700683, -73.925972),

                map;



            function initializeMap()

            {

                map = new google.maps.Map(document.getElementById('map_canvas'), {

                   zoom: 13,

                   center: mapCenter,

                   mapTypeId: google.maps.MapTypeId.ROADMAP

                 });

            }



            function locError(error) {

                // the current position could not be located

                alert(The current position could not be found!);

            }



            function setCurrentPosition(pos) {

                currentPositionMarker = new google.maps.Marker({

                    map: map,

                    position: new google.maps.LatLng(

                        pos.coords.latitude,

                        pos.coords.longitude

                    ),

                    title: Current Position

                });

                map.panTo(new google.maps.LatLng(

                        pos.coords.latitude,

                        pos.coords.longitude

                    ));

            }



            function displayAndWatch(position) {

                // set current position

                setCurrentPosition(position);

                // watch position

                watchCurrentPosition();

            }



            function watchCurrentPosition() {

                var positionTimer = navigator.geolocation.watchPosition(

                    function (position) {

                        setMarkerPosition(

                            currentPositionMarker,

                            position

                        );

                    });

            }



            function setMarkerPosition(marker, position) {

                marker.setPosition(

                    new google.maps.LatLng(

                        position.coords.latitude,

                        position.coords.longitude)

                );

            }



            function initLocationProcedure() {

                initializeMap();

                if (navigator.geolocation) {

                    navigator.geolocation.getCurrentPosition(displayAndWatch, locError);

                } else {

                    alert(Your browser does not support the Geolocation API);

                }

            }



            $(document).ready(function() {

                initLocationProcedure();

            });



        </script>

    </head>



    <body>

        <div id=map_canvas style=height:600px;></div>

    </body>



</html>