Article Categories

Selected Reading

How to best display HTML5 geolocation accuracy on a Google Map?

Google maps Web Development Front End Scripts Javascript

To display HTML5 geolocation accuracy on a Google Map, you need to combine the Geolocation API with Google Maps to show both the user's position and the accuracy radius as a circle.

Basic Setup

First, get the user's location using the HTML5 Geolocation API and extract the accuracy information:

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation Accuracy on Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
    <div id="map" style="height: 400px; width: 100%;"></div>
    
    <script>
        function initMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        
        function showPosition(position) {
            var lat = position.coords.latitude;
            var longitude = position.coords.longitude;
            var accuracy = position.coords.accuracy;
            
            // Create map centered at user's location
            var center = new google.maps.LatLng(lat, longitude);
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: center
            });
            
            // Add marker for user's position
            var marker = new google.maps.Marker({
                position: center,
                map: map,
                title: 'Your Location',
                icon: {
                    url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                }
            });
            
            // Add accuracy circle
            var accuracyCircle = new google.maps.Circle({
                center: center,
                radius: accuracy,
                map: map,
                fillColor: '#4285F4',
                fillOpacity: 0.2,
                strokeColor: '#4285F4',
                strokeOpacity: 0.8,
                strokeWeight: 1
            });
            
            // Fit map bounds to show the entire accuracy circle
            map.fitBounds(accuracyCircle.getBounds());
        }
        
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                default:
                    alert("An unknown error occurred.");
                    break;
            }
        }
        
        // Initialize map when page loads
        window.onload = initMap;
    </script>
</body>
</html>

Key Components Explained

Position Coordinates: Extract latitude, longitude, and accuracy from the position object returned by geolocation.

Marker: Shows the exact GPS coordinates with a blue dot icon to represent the user's estimated position.

Accuracy Circle: A semi-transparent circle with radius equal to the accuracy value (in meters) showing the possible error range.

Customizing the Accuracy Display

<script>
// Enhanced version with accuracy information display
function showPosition(position) {
    var lat = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    
    var center = new google.maps.LatLng(lat, longitude);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: center
    });
    
    // Custom marker with info window
    var marker = new google.maps.Marker({
        position: center,
        map: map,
        title: 'Your Location'
    });
    
    // Info window showing accuracy details
    var infoContent = `
        <div>
            <h4>Your Location</h4>
            <p>Latitude: ${lat.toFixed(6)}</p>
            <p>Longitude: ${longitude.toFixed(6)}</p>
            <p>Accuracy: ±${accuracy.toFixed(0)} meters</p>
        </div>
    `;
    
    var infoWindow = new google.maps.InfoWindow({
        content: infoContent
    });
    
    marker.addListener('click', function() {
        infoWindow.open(map, marker);
    });
    
    // Accuracy circle with better styling
    var accuracyCircle = new google.maps.Circle({
        center: center,
        radius: accuracy,
        map: map,
        fillColor: accuracy < 100 ? '#00FF00' : accuracy < 500 ? '#FFFF00' : '#FF0000',
        fillOpacity: 0.15,
        strokeColor: accuracy < 100 ? '#00AA00' : accuracy < 500 ? '#AAAA00' : '#AA0000',
        strokeOpacity: 0.6,
        strokeWeight: 2
    });
    
    // Adjust map view to show the accuracy circle
    map.fitBounds(accuracyCircle.getBounds());
}
</script>

Accuracy Color Coding

Accuracy Range	Color	Meaning
< 100m	Green	High accuracy
100-500m	Yellow	Medium accuracy
> 500m	Red	Low accuracy

Best Practices

Handle Errors: Always include error handling for cases where geolocation fails or is denied.

Visual Feedback: Use different colors or opacity levels to indicate accuracy quality.

Map Bounds: Use fitBounds() to ensure the entire accuracy circle is visible on the map.

Conclusion

Displaying geolocation accuracy on Google Maps involves creating a marker for the position and a circle representing the accuracy radius. The combination provides users with clear visual feedback about location precision.

Rishi Rathor

Updated on: 2026-03-15T23:18:59+05:30

480 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next