So I am working with google maps on a project
I need to get lat&lng from a place name (not city but a, lets say, caffee in a city, or a mall in a city). So I went with this code
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'SCC, Sarajevo'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
$("#pretragaBarInput").val("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
} else {
alert("Something got wrong " + status);
}
});
(SCC is a mall in Sarajevo)
But I dont get the exact lat&lng from the place but rather lat&lng from the city center. I've tried with other places but got the exact same coords that point to the city center
P.s. This is just a debug script to see if its working...
Geocoding is for addresses(although it also may return the desired result for prominent places).
When you are searching for places uses the places-library, e.g. a PlacesService.textSearch
(returns: Sarajevo City Center, Vrbanja 1, Sarajevo 71000)
Related
I have this error: "You have exceeded your daily request quota for this API."
Currently, the form is set up to force select the first match from the API.
I would like to not force select the first match when exceeding this daily limit. I thought the status= "OVER_QUERY_LIMIT" would work, but turns out this is the status I get = "ZERO_RESULTS".
Anyone have any idea why "ZERO_RESULTS" come back instead of "OVER_QUERY_LIMIT"?
Here is a piece of my code:
geocoder.geocode({"address": firstResult}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var formattedResult = results[0].formatted_address;
$("#input-location").val(formattedResult);
}
}
if (status == "OVER_QUERY_LIMIT") {
$(".btn-search-submit").removeAttr('disabled');
return;
}
if (status == 'ZERO_RESULTS') {
$(".search-no-results").remove();
$(".btn-search-submit").attr('disabled', true);
$(".pac-container").show();
$(".pac-container").append(
"<div class='search-no-results'>" +
"<p><strong> Sorry, no results</strong></p>" +
"<p>Please check your spelling or try a zipcode</p>" +
"</div>");
setTimeout(function(){
$(".pac-container").hide();
}, 3000);
}
});
}
This sounds like more of a business/software engineering question than a programming question.
You can see the cost of Google Maps API requests here: https://developers.google.com/maps/premium/usage-limits#limitexceeded
And you can see the pricing plans available here: https://developers.google.com/maps/pricing-and-plans/#details
If you're going over the limit, it might be time to just upgrade the pricing plan.
I am trying to get geo coordinates and then return them into my HTML. This is the code I have so far, but it is not returning the coordinates onto my page:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#cityname").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
I have an id in my html named 'cityname'. I would also like to convert the coordinates into a city name.
Your code seems to work just fine:
https://jsfiddle.net/sexepm39/
Perhaps your div isn't available in the DOM when this code runs?
Try wrapping it as such:
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#cityname").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
});
As for getting the city name, this part of your question is already answered: Get city name using geolocation
I have a requirement where i have to find the geoip location of the users. I have used the code where i store the address of the user in database and then display the geoip location of that user.Now suppose the users changed his location to some other place.If the user now logs in from that region or country, how should i display the geoip of that user. The code that i use is:
geo.geocoder(geo.google, address, sensor,function(formattedAddress, latitude, longitude) {
console.log("Formatted Address: " + formattedAddress);
console.log("Latitude: " + latitude);
console.log("Longitude: " + longitude);
user.latitude = latitude;
user.longitude = longitude;
user.save(function(err) {
if(err)
return userUpdateFailed();
req.flash('info', 'Succesfully Upadated Changes');
res.redirect('/userinfo');
});
});
Is there any alternative wherby i can be able to find the exact location of user.Please help
Node-GeoIP could be a solution but keep in mind that ip-based geolocalization isn't always truthful.
I have some jQuery code that uses Google Maps Geocoding API to convert an address to coordinates, then use alert() to show the result in popup window. Here is the code which works fine:
$("#searchbox_form #search_button").click(function(e){
e.preventDefault();
var address = $("#location").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("input#user_lat").val(results[0].geometry.location.lat());
$("input#user_lng").val(results[0].geometry.location.lng());
alert("lat: " + $("input[name='user_lat']").val());
alert("lng: " + $("input[name='user_lng']").val());
}
});
});
However now I want jQuery to submit the form $searchbox_form after the user closes the alert box. However adding $("#searchbox_form").submit(); at the end of the code chunk submits the form before the alert box shows up. This also causes the form to be submitted before the Google Maps geocoder returns the result.
How can I allow the geocoder to return the result before the form gets submitted?
Same as the code above, but with 1 additional line to submit form at the end:
$("#searchbox_form #search_button").click(function(e){
e.preventDefault();
var address = $("#location").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("input#user_lat").val(results[0].geometry.location.lat());
$("input#user_lng").val(results[0].geometry.location.lng());
alert("lat: " + $("input[name='user_lat']").val());
alert("lng: " + $("input[name='user_lng']").val());
}
});
$("#searchbox_form").submit(); //THIS IS THE ADDED LINE OF CODE!!
});
You need to move the submit within the callback to the geocode function. The reasoning is, it's asynchronous and not running in direct order, so it's calling the geocode and then immediately firing the submit. If you put it like below, the form will submit on callback and after the alerts (as alerts will block the thread).
$("#searchbox_form #search_button").click(function(e){
e.preventDefault();
var address = $("#location").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
// This function is async
if (status == google.maps.GeocoderStatus.OK) {
$("input#user_lat").val(results[0].geometry.location.lat());
$("input#user_lng").val(results[0].geometry.location.lng());
alert("lat: " + $("input[name='user_lat']").val());
alert("lng: " + $("input[name='user_lng']").val());
$("#searchbox_form").submit();
}
});
});
Why don't you just submit it after you're done with your callback?
$("#searchbox_form #search_button").click(function(e){
e.preventDefault();
var address = $("#location").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("input#user_lat").val(results[0].geometry.location.lat());
$("input#user_lng").val(results[0].geometry.location.lng());
alert("lat: " + $("input[name='user_lat']").val());
alert("lng: " + $("input[name='user_lng']").val());
$("#searchbox_form").submit();
}
});
});
I think geocoder.geocode is an asynchronous function. Therefore you need the submit after the alert boxes.
$("#searchbox_form #search_button").click(function (e) {
e.preventDefault();
var address = $("#location").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("input#user_lat").val(results[0].geometry.location.lat());
$("input#user_lng").val(results[0].geometry.location.lng());
alert("lat: " + $("input[name='user_lat']").val());
alert("lng: " + $("input[name='user_lng']").val());
$("#searchbox_form").submit();
}
});
});
For a website where a user enters his address, I'm trying to find the location closest to him where the user can collect the ordered goods.
Based on the user's address I can narrow down the possible pick up locations to between 2 and 5. So I'd like to calculate the distance between user's address (point A) and the possible pick up locations.
The demo here works fine with just two addresses. I've adapted the code as much as I can to work with more than two addresses. I posted my JS code here since I can't seem to properly format it in SO.
In the code are two alerts. The first alert correctly shows the different pick up locations. But the second alert always shows the LAST pickup location.
Can anyone explain why?
HTML:
<p id="hello">Hello World</p>
JavaScript:
var geocoder, location1, location2, gDir;
function initialize(counter) {
if( counter == 0 ){
geocoder = new GClientGeocoder();
gDir = new GDirections();
}
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
$("#results").append('<strong>Driving Distance: </strong>' + drivingDistanceKilometers + ' kilometers<br /><br />');
});
}
function getDistance(agency_add, counter) {
initialize(counter);
geocoder.getLocations(agency_add, function (response) {
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode the address" + agency_add);
}
else {
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
//alert("ONE: "+location1.address);
geocoder.getLocations(document.forms[0].address1.value, function (response) {
//alert("TWO: "+location1.address);
if (!response || response.Status.code != 200) {alert("Sorry, we were unable to geocode the second address");}
else {
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
$(document).ready(function(){
//put each agency address in an array
var agencies = [];
$(".agency_field").each(function(index) {
agencies.push($(this).val());
});
for (var i = 0; i < agencies.length; i++){
var res = getDistance(agencies[i], i);
}
});
you are calling geocoder.getLocations inside a loop. geocoder.getLocations runs asynchronously. when it receives the 2nd request while still processing the first, it cancels the first request.
If you want to multi-thread geocoder.getLocations you need to create multiple instances of it.