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.
Related
I want to load external url in a div without using iframe/embed/object tag. I already used examples but it is not working
For example:
$("#testDiv").load("//localhost:8000/cities/Mountain%20View/521/bottle-service/new");
or
$("#testDiv").load("//www.xyz.com");
Could anyone please help me fix this issue?
Based on your comment I think you need something like this:
$('#mydiv').load('http://localhost:8000/cities/Mountain%20View/521/bottle-service/new #testDiv', function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
}
});
For better insight I'm linking this question with this SO post
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)
One of my form fields is address. Before sending it to the server I want to transform it to latitude and longitude. This requires sending asynchronous request to some external service (e.g. Google Maps API). What's the proper way to do this?
My geocoding snippet:
function geocodeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({"address": address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat()
document.getElementById("latitude").value = lat
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
I see several options:
Use onsubmit event handler - first return false (to wait for geocoding to complete), then in a separate callback set latitude field and submit form.
Use onchange event handler for address field - this requires blocking submit button until we geocode the address; it's also tricky if we prepopulate form values after submit it (e.g. filter rows)
Obviously I can also parse it on the server side, but this may result in one user using all my "quota" in the external service and I'd have to implement some kind of fairness, which I'd like to avoid.
So what's the proper way to solve this kind of pre-processing of form values in javascript?
You could consider the following approach:
prevent default behavior of button via Event.preventDefault()
resolve address via google.maps.Geocoder.geocoder function
once the address is resolved resume form submit: form.submit()
Example
function saveData(e) {
e.preventDefault(); //1.stop default behaviour of button
var address = document.getElementById("txtAddress").value;
resolveAddress(address,
function(results) {
document.getElementById("txtLat").value = results[0].geometry.location.lat();
document.getElementById("txtLng").value = results[0].geometry.location.lng();
document.getElementsByTagName('form')[0].submit(); //2.resume form submit
},
function(status) {
console.log('An error occured while resolving an address');
});
}
function resolveAddress(address,success,error) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "address": address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
success(results);
} else {
error(status);
}
});
}
Plunker
I am having trouble extracting data from the following function which only works with an alert(content) as the next line but obviously this has to be removed! What am I doing wrong please?
var address = [];
var content;
geocoder.geocode({'latLng': Marker.getPosition()}, function(responses, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (responses && responses.length > 0) {
address = (responses[0].formatted_address).split(',');
for (i =0; i < address.length; i++) {
content += '<div>' + address[i] + '</div>';
}
}
}
});
content += content '<br>Last line</div>';
The above line does not include the above geocode content at all.
Callback is async, you can use the value only inside the callback.
content += content '<br>Last line</div>';
Will execute BEFORE the callback fires.
Please read this regarding handling server data got by AJAX.
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.