I've been thinking about this and I couldn't figure it out on how to develop this feature. Currently my app will technically notify every driver, whenever another user trigger a button. I'm using google Maps for calculating routes and so on.
The feature that I'm building is similar like Uber notification system, where whenever a user click "set pickup location" it will then notify to bunch of drivers nearby the user's location.
But the problem right now, it will notify to every drivers that is online, and that's not what I want. I want to notify only the drivers that are nearby to the user's location.
How would I achieve this? What sorts of variables do i need to accomplish this
Im using
IOS/Swift
Google maps
node.js as the backend and socket.io as realtime
Algorithm overview
To notify all the user that are near you, I suggest you the following algorithm:
Determine your location
Determine the location of other users
Calculate their distance to you
This algorithm is very simple, but very heavy, perhaps why #LU_ suggest you do this on your server.
Optimizations
There are multiple hacks to optimize it, for example, instead of checking the location and calculating the distance for all the millions of users in your app, you can elect a random subset, or you can pick and choose who is more interesting based on some criteria.
Steps and Code
The first and second steps of this algorithm require you to find locations. For this effect I suggest you the following example:
https://developers.google.com/maps/documentation/javascript/tutorials/geolocation
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({
map: map
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
Please note that you need to enable your browser to give its location or website/service (I believe StackOverflow may block it, but you can check the original example working on the original page).
Once you have the locations of you and the users you want, you can send this information to the client or to the server. With this information you can then calculate the distances to the original client, using the information described in this discussion Calculate distance between two latitude-longitude points? (Haversine formula) .
With the distances, and the location of the original client, you can then decide what to do.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am new to google maps. I have added the following code to display it :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Key&callback=initMap">
</script>
</body>
</html>
It is asking for the key which we have to purchase i think, up to the extent which i have researched about it. can anyone please guide how to solve this key issue or is there any other way which can be used to display the map on website. I do have created the key fromgoogle cloud platform and puted it in required place still the code just shows a glimpse of map and then disappears giving the error for key.
Thanks in advance.
Since you already generated an API key from Google Cloud Platform Console, kindly make sure of the following:
A. Include the API key from the GCP Console like the sample shown below:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=Aiza*******&callback=initMap"></script>
B. Make sure that you have a valid billing account associated to the project where your API key belongs.
If you do not enable your billing account, you will only be able to load your map once per day.
Do not be afraid to add your billing account as you will not be charged unless you upgrade your billing account.
Upon enabling your billing account, you will be entitled to a one time $300 free credit(usable for Google Cloud Platform products) and a monthly recurring $200 free credit(exclusive for Google Maps Platform), in case that you exhaust the free credits, you will receive an OVER_QUERY_LIMIT error and will not be charged, if you wish to not interrupt your usage, you may upgrade your billing account and you will be billed accordingly after you consume all your free credits.
Note: Please also be sure to enable the Maps Javascript API as well.
Try to remove the key parameter from the following resource.
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
It will render the map in development environment. So, that you can develop whatever you want in the development mode.
I have developed google map web application without the key parameter (development environment) which works perfectly.
The map will show the message FOR DEVELOPMENT PURPOSE ONLY in development environment.
I have been trying to find a tool to locate my position using my computer ip.
I have tried some web tools such as http://geoiplookup.net/and https://geoiptool.com/ and some developer tools like freegeoip.net, in which I'm more interested.
the fact is: geolocation is way off in all of them, at least where I'm located (South America, Brazil), all pointing to the same wrong location.
why is it so?
I have tried this piece of code:
send_url = 'http://freegeoip.net/json'
r = requests.get(send_url)
j = json.loads(r.text)
lat = j['latitude']
lon = j['longitude']
return (lat, lon)
but since it uses a wrong ip it returns some strange lat/lgn, miles away from me.
1) can I pass my exact ip as an argument in the code above?
2) is there any other tool for finding out my precise lat, lng, other than googlemaps?
IP address geolocation is relatively less accurate compare to other geolocation methods such as GPS or WiFi MAC address. The reason is due to frequent reallocate of IP address by ISP.
Reference: http://www.geolocation.com
Back to your questions.
1) The API should auto detect your IP address and return you the estimated location
2) You could not find your precise lat and longitude without enable the GPS
Try the services of http://geoip-db.com
A small jQuery example to retrieve location, country, city, lat, lon, ip and state:
<!DOCTYPE html>
<html>
<head>
<title>GEOIP DB - jQuery example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>
<div>Country: <span id="country"></span>
<div>State: <span id="state"></span>
<div>City: <span id="city"></span>
<div>Latitude: <span id="latitude"></span>
<div>Longitude: <span id="longitude"></span>
<div>IP: <span id="IPv4"></span>
<script>
$.ajax({
url: "https://geoip-db.com/jsonp",
jsonpCallback: "callback",
dataType: "jsonp",
success: function( location ) {
$('#country').html(location.country_name);
$('#state').html(location.state);
$('#city').html(location.city);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#ip').html(location.IPv4);
}
});
</script>
</body>
</html>
I have seen previous posts regarding the conversion from a Google Place ID to an address; however I am interested in the opposite.
I have the GMS Address of the desired location but I want to acquire the Google Place ID in order to present more details to the user. From what I have seen on Google's iOS API website, you can attain a Google Place ID from an Autocomplete feature (for user searching), a selected location feature, or a current location feature.
My application intends to display multiple locations in which I already have the addresses for. The user can select individual locations for more details in addition to receiving details upon arrival. Therefore the features listed above are not ideal.
I have also tried using Google's Web API with features such as "Text Search Requests" & "Nearby Search Requests" however I am receiving "Zero Results".
Are there other methods that I haven't thought of and/or seen?
How about the Place ID finder in the Google Maps JavaScript API.
A place ID is a textual identifier that uniquely identifies a place. It is also available for most locations, including businesses, landmarks, parks, and intersections. These IDs are stable, meaning that once you've identified the place ID for a place, you can reuse that value when you next look up that place.
You can use the same place ID across the Google Places API and a number of Google Maps APIs. For example, you can use the same place ID to reference a place in the Places API, the Google Maps JavaScript API, the Google Maps Geocoding API, the Google Maps Embed API and the Google Maps Roads API.
Here is the sample code use for this.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address);
infowindow.open(map, marker);
});
}
Just take note that this example requires the Places library. Include
the libraries=places parameter when you first load the API. For
example:
script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&libraries=places"
how to get current location using internet ?
i'm making an application where i necessary need the latitude and longitude of user.
Would anyone please tell me if i off the iPhone location service from settings and
i want to get current location from internet not from the GPS then how can i get it
in iOS?
is this possible in latest iOS ?
I used the Core Location framework.
If any one having any idea please share with me.
Like in Android they use something like this
isGPSEnabled = locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER);
isNetworkEnabled = locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER);
so i also want to get location if the location service is OFF.
Thanks in advance.
there no any apple sdk but you use HTML5. call this html from your native code and get response to handle
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
I am new to html 5 geolocation, Is there any site or examples where it shows how, i can use html geolocation api to track the location of other devices. Also, for example how can i use use HTML5 geolocation to find the nearest car dealer say 5 or 10 miles from me?
Any examples sample would be really helpfull.
thanks
I can't speak to tracking devices, but i've been writing something that might help with the second part of your question.
//check browser support
if(navigator.geolocation) {
//do the geolocation stuff
navigator.geolocation.getCurrentPosition(function(position) {
//make a string out of the coordinates
var initloc_str = position.coords.latitude + ', ' + position.coords.longitude;
//pass it to a function that searches for donut shops near the coordinates
donutSearch(initloc_str);
});
} else { // if no browser support, error message or whatever
My donut shop search function is based on the local search in Google's Ajax search API, I found this article on webmonkey helpful for that bit. That API was recently deprecated but I haven't figured out how to do local search with their new Custom Search API yet.
You can register a function for tracking positions of a user:
var watchId = navigator.geolocation.watchPosition(function(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
});
And you can unregister:
navigator.geolocation.clearWatch(watchId);
This site will give you a awesome overview of the HTML5 geolocation Capability.