asked on

How to improve accuracy and refresh rate of browser-based Google Map?

Hello,

I've created a basic Google Map on an HTML page using Javascript to show user's current location and update it as they move.

You can see it here: http://www.squeezeoj.com/test01.html

Problem is that the accuracy is not real good and the refresh rate is too low. So, the map is right within about 0.25 miles - which is NOT good enough - and the refresh rate is so slow that it takes way too long to update when driving in residential neighborhoods.

Code is below.

How can I INCREASE ACCURACY and REFRESH RATE of this page?

Thanks,
Jason

<!doctype html>
<!-- FROM: http://stackoverflow.com/questions/16222330/geolocation-moving-only-google-maps-marker-without-reload-the-map -->
<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>

Open in new window

ASKER CERTIFIED SOLUTION

WillNy3

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

dgrafx

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SqueezeOJ

ASKER

WillNy3 & dgrafx:

Increasing the zoom seems to help accuracy. However, the map only updates about every 30 seconds, so I'm always way behind. How do I increase refresh frequency? (I'll be searching for the answer to, but any help is appreciated.)

WillNy3

Based on your example I can't tell how refresh is occurring. My first guess would be to call watchCurrentPosition on an interval to run as frequently as you need on an ajax call.