Location change depending on browser - Google Maps

2

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

When entering the site of my project the browser asks if it can obtain the location of the user. Only I noticed that the location varies depending on the browser. Using Google Chrome the location is fine however if accessing 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.

Is there anything 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!');
            }
    
asked by anonymous 04.03.2016 / 16:06

1 answer

1

Precision is determined by the browser, but you can, via code, ask the browser to give you greater precision. There is no guarantee that he will succeed, but he will 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, it tells you when changes occur in the user's position and this can bring you more precision. Some cell phones, for example, first send information less accurately and only increase accuracy over time.

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

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

navigator.geolocation.clearWatch(id);

Another factor that may help you is the accuracy attribute of the position.coords object, which its success function receives when called. It tells you how accurate the coordinates are.

All this may help you, but none of this will guarantee good accuracy. Google has a lot more resources to know its location more precisely than the others. Chrome can, for example, use streetview data (which collects data from all Wi-Fi networks where google's cars go) for accuracy.

More details about options: link More about Position.coords: link

Source: link link

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

    
07.03.2016 / 16:53