Location selection depending on browser - Google Maps

Question

I recently started using the Google Maps API, so I know very little about.

When entering the site of my project the browser asks if it can obtain the user’s location. Only I realized that the location varies depending on the browser. Using Google Chrome the location is very precise but if you access with Firefox or Edge is totally different..

Why does this variation of location occur?

Google Chrome (@-23.6058457,-46.6586903,18.25z)

Mozilla Firefox (@-23.6083054,-46.6559814,18.4z)

Microsoft Edge (@-23.5346485,-46.6277816,16.91z) - Far from my location.

There’s something I can change in my code to correct this inaccuracy?

var geocoder;
            var map;
            var marker;

            function initialize() {
                var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
                var options = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("googleMaps"), options);

                geocoder = new google.maps.Geocoder();

                marker = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    icon: 'images/mapicon.png',
                });

                marker.setPosition(latlng);
            }

            // verifica se o navegador tem suporte a geolocalização
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) { // callback de sucesso
                    // ajusta a posição do marker para a localização do usuário
                    //marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                    initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(initialLocation);
                    marker.setPosition(initialLocation);

                },
                function (error) { // callback de erro
                    alert('Erro ao obter localização!');
                    console.log('Erro ao obter localização.', error);
                });
            } else {
                console.log('Navegador não suporta Geolocalização!');
            }

Answer 1

The accuracy is determined by the browser, but you can, via code, ask the browser to give you greater precision. There’s no guarantee he’ll make it, but he’ll try.

In your code, create the options dictionary:

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

Then enter it as the third parameter in the getCurrentPosition call:

navigator.geolocation.getCurrentPosition(function (position) { // callback de sucesso
                    // ajusta a posição do marker para a localização do usuário
                    //marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                    initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(initialLocation);
                    marker.setPosition(initialLocation);

                },
                function (error) { // callback de erro
                    alert('Erro ao obter localização!');
                    console.log('Erro ao obter localização.', error);
                }, options );

Note that the function may take longer to return.

Another option that can help you is the watchPosition function, which tells you when changes occur in the user’s position and this can bring you more accuracy. Some mobile phones, for example, first send information with less precision and only increase accuracy over time.

id = navigator.geolocation.watchPosition(success, error, options);

The parameters to be passed are basically the same as getCurrentPosition, but remember that this function will call your callbacks every time the position changes. The return value ID can be used to disable watchPosition:

navigator.geolocation.clearWatch(id);

Another factor that may help you is the Accuracy attribute of the position.coords object, which your Success function receives when it is called. It tells you the accuracy of the coordinates found.

All this may help you, but none of this will guarantee good accuracy. Google has many more features to know your location more precisely than others. Chrome can, for example, use Streetview data (which collects data from all the wifi networks Google cars pass through) for greater accuracy.

More details about the options: https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions More about Position.coords: https://developer.mozilla.org/en-US/docs/Web/API/Coordinates

Source: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition

EDIT: I noticed that you already have a dictionary called options in your code, give any other name to the dictionary I mentioned above.