I am trying to bias google.maps.places.Autoplete based on location and radius (). The following returns results, but based on the client's IP and not my specified location. How is Google maps autoplete properly biased for location? /
var autoplete = new google.maps.places.Autoplete(
document.getElementById('address'), {
types: ['geocode'],
radius: 1000,
location:[47.64864,-122.348927]
}
);
I am trying to bias google.maps.places.Autoplete based on location and radius (https://developers.google./places/webservice/autoplete#location_biasing). The following returns results, but based on the client's IP and not my specified location. How is Google maps autoplete properly biased for location? http://jsbin./nazufozeyu/1/
var autoplete = new google.maps.places.Autoplete(
document.getElementById('address'), {
types: ['geocode'],
radius: 1000,
location:[47.64864,-122.348927]
}
);
-
I'm guessing your format for the location is the problem. In general with the Google Maps Javascript API you must either use a google.maps.LatLng object, or a latlng literal like
{lat:47.64864,lng:-122.348927}– bart Commented Dec 6, 2017 at 15:22
2 Answers
Reset to default 4I am sure this could be done better, but the following will work. http://jsbin./vetayoreto/1/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>google.maps.places.Autoplete</title>
<style type="text/css">
input{width:600px; display:block;}
</style>
<script type="text/javascript" src="//maps.googleapis./maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<input id="input" type="text" value="" />
<script>
var center = new google.maps.LatLng(40.7,-74);
var circle = new google.maps.Circle({
center: center,
radius: 10000
});
var autoplete5 = new google.maps.places.Autoplete(
document.getElementById('input'),
{
types: ['geocode']
}
);
autoplete5.setBounds(circle.getBounds());
</script>
</body>
</html>
So, after checking the API, it looks like the location you're providing is probably being ignored. You have options on what you can do, but you need to provide a bounds attribute in your options of type LatLngBounds. See the autoplete options API: https://developers.google./maps/documentation/javascript/reference#AutopleteOptions
You can provide a Circle, Rectangle, Polyline, etc, then pull the bounds from it. Regardless of how you do it, you need to provide a bounds of which to search in, you can't just provide a single lat-long point. @user1032531 provided a good example of how you might do it with a circle.
If you have a certain city/country in mind you want to search in, you can use the geocoding API: https://developers.google./maps/documentation/geocoding/
Call the API like this: https://maps.googleapis./maps/api/geocode/json?address=Toledo&key=API_KEY and you'll get some JSON back that has a "bounds" key. Take your boundbox, and pass it to the places API call.