Develop Reference

cordova geolocation not accurate

I have an ionic 4 app which uses cordova and the google maps api. I am using the HTML5 geoloction plugin which watches the device 's position as the user moves and then generates a new googleMaps marker and displays it on the map.
this.watchLocation = await this.geolocation
.watchPosition()
.subscribe(location => {
this.map.animateCamera({
target: {
lat: location.coords.latitude,
lng: location.coords.longitude
},
zoom: 16,
duration: 1000
});
this.marker.setPosition({
lat: location.coords.latitude,
lng: location.coords.longitude
});
With the code above, i have tested the app on a Samsung note 9 and the results are 100% accurate. I have also tested the same app on other android devices (Galaxy A20 and Huawei Y5) and the results are not accurate, instead the marker jumps out of position for about 50 to 200 meters from my position.
Galaxy note 9 results:

Try setting the enableHighAccuracy option to true. The docs describe it as follows:
The PositionOptions.enableHighAccuracy property is a Boolean that
indicates the application would like to receive the best possible
results. If true and if the device is able to provide a more accurate
position, it will do so. Note that this can result in slower response
times or increased power consumption (with a GPS chip on a mobile
device for example). On the other hand, if false (the default value),
the device can take the liberty to save resources by responding more
quickly and/or using less power.
Also refer to related thread Very High Accuracy in Html5 Geolocation

Pop up with everything just like user opened maps herself

I've been doing quite a bit of searching here and on Google, but it's hard to think of a good search string.
In HTML, I set the mapInit callback where I do this:
map = new google.maps.Map( elem,
{
center: { lat: 52.1, lng: 4.8 },
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
What I expected is a map just like as if the user started a new tab with maps.google.com, with just those things overruled. That doesn't happen. The tab is always a lot poorer than when I start maps 'by hand'. No search box, no right-click menus, really nothing of all these things that I so like.
Is there a way to do what I want, and if so, how?

Google Maps API lets you create a map viewer on your website.
The experience is very limited compared to the maps.google.com and there is no way to get the "full" maps experience, it's something Google still reserves to themselves.

Cordova 5.2.x Geolocation not Accurate

I have the following code in my app:
var geo = { lat: 0, lon: 0 };
navigator.geolocation.getCurrentPosition(
function( position ) {
// set global vars
geo.lat = position.coords.latitude;
geo.lon = position.coords.longitude;
},
function( error ) {
// handle error
geolocationError( error );
},
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }
);
For one reason or another the location that I get in my app using the above code is very different (100's of meters, sometimes a 1KM or more) than what is displayed in the native map application (i.e. iOS Maps). Why is this?
It's particularly a problem in places where there is no Wifi and I am indoors. For example, recently in an airport my position in the native map application was very accurate; I was positioned in the right terminal - but when I opened my app and refreshed it many times over several minutes the position wasn't anywhere near the terminal I was in, in fact I was about 1KM from the airport.
What do I need to do to get at the very least, the geolocation that the native apps are able to get?

I ran into this issue multiple times before - there isn't anything you can really do about it even if you set enableHighAccuracy to true. It's an issue with the HTML5 geolocation method. Turning on wifi and bluetooth increases the accuracy, but you can't guarantee a user will do that every time.
Best of luck.

Location Accuracy in Browser with navigation.geolocation

I am creating a browser app where, one of the pieces of functionality, is that the user is placed on a map, and then the surrounding area is searched for nearby "things." It is important (and a requirement) that I am as accurate as possible since the nearby location makes a big difference to what is shown to the user.
In order to place the person on the map, I wrote the below code (there is a bit more, but I'm leaving that part out). But, in every case, I am seeing the accuracy range from right on top of my location, to up to a few hundred meters away. There doesn't seem to be any rhyme or reason as to why.
I am outside when I am measuring. I am disconnected from any WiFi (but my WiFi is enabled). I am testing iOS devices on Safari and Chrome, and I am testing Android devices on Chrome. The results are similar across all devices.
One thing I have noticed is that I see that the phones are making requests for location. I see the GPS symbol show up (briefly) on my Android devices. I can see that Safari and Chrome have made recent location requests in the Apple Location Settings. In addition, when I navigate the user to the location (which breaks out into apps like Google Maps or Apple Maps), the location is very accurate and found immediately.
Am I doing something wrong here? Is there something I can do to increase accuracy?
// Attempt to get low-accuracy location if high cannot be retrieved.
function handleLocationError_high(error) {
if(error.code == error.TIMEOUT) {
// Attempt low accuracy if a timeout occurs.
navigator.geolocation.getCurrentPosition(
locationSuccessCallback,
handleLocationError_low,
{timeout: 10000, maximumAge: 0, enableHighAccuracy: false});
} else {
handleLocationError_low(error);
}
}
// Handle the error if location cannot be retrieved at all.
function handleLocationError_low(error) {
console.log('No location found!');
}
// Geolocation callback if there is success in getting the golocation (high or low accuracy).
function locationSuccessCallback(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// ...place the user on the map.
}
// Try HTML5 geolocation.
// Test for support of geolocation. If it is not supported, error.
// Next, attempt to get high accuracy (GPS) position. If that times out, get the low accuracy position.
if(!navigator.geolocation) {
handleLocationError_low();
return;
}
navigator.geolocation.getCurrentPosition(
locationSuccessCallback,
handleLocationError_high,
{timeout: 5000, maximumAge: 0, enableHighAccuracy: true});

Real time GPS Tracker on JUST HTML / JS and Google Maps to be run on a handphone? Is it possible?

I have read up on GPS Real time tracking and found out several things about it, mostly requiring PHP, zope and a database to store the incoming data. Some other methods uses ajax with relations to PHP.
As regards to my question, is it possible to do so with just html and JS, using markers or anything else to populate the Google Map when you move anywhere in the city? Need some help on this, Thanks!

Yes, it is possible. Most browsers in the latest smartphones have implemented the W3C Geolocation API:
The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.
The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions.
Using the Geolocation API to plot a point on Google Maps, will look something like this:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
alert('W3C Geolocation API is not available');
}
The above will only gather the position once, and will not auto update when you start moving. To handle that, you would need to keep a reference to your marker, periodically call the getCurrentPosition() method, and move the marker to the new coordinates. The code might look something like this:
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
function autoUpdate() {
navigator.geolocation.getCurrentPosition(function(position) {
var newPoint = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
if (marker) {
// Marker already created - Move it
marker.setPosition(newPoint);
}
else {
// Marker does not exist - Create it
marker = new google.maps.Marker({
position: newPoint,
map: map
});
}
// Center the map on the new position
map.setCenter(newPoint);
});
// Call the autoUpdate() function every 5 seconds
setTimeout(autoUpdate, 5000);
}
autoUpdate();
Now if by tracking you mean that you should also store this information on a server (so that someone else could see you moving from a remote location), then you'd have to send the points to a server-side script using AJAX.
In addition, make sure that the Google Maps API Terms of Use allow this usage, before you engage in such a project.
UPDATE: The W3C Geolocation API exposes a watchPosition() method that can be used instead of the setTimeout() mechanism we used in the above example.