CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-places-apigoogle-maps-api-2
Blake Rivell
Blake Rivell

Reputation: 13875

Creating a food places/restaurant Autocomplete field with multiple bounds using Google Maps JavaScript API

I am attempting to create a food places/restaurants Autocomplete field that does the following:

  1. Prioritizes so food places/restaurants near both Office 1 and Office 2 (Latitude/Longitude) display first. (It seems like when you pass multiple LatLng combinations as the bounds it does not do this. Would like to confirm it is not possible.)
  2. Shows only places that are food related. (I believe with Autocomplete this is not possible because it is restricted to passing in only certain place types)

Here is the closest I could get to what I am trying to achieve. However it only works correctly if I pass in a single LatLng for either Office 1 or Office 2, but not both.

<script type="text/javascript">
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-60.8474, 200.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);
</script>

Upvotes: 0

Views: 624

Answers (1)

Chris Applegate
Chris Applegate

Reputation: 762

The LatLngBounds takes a south-west co-ordinate as its first argument, and a north-east as a second. In your example, your second co-ordinate is more southern than the first and so the bounds are invalid:

This alternative ought to work regardless of relative position of the points:

var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759));
defaultBounds.extend(new google.maps.LatLng(-60.8474, 200.2631));

Upvotes: 1

Related Questions