CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-places-api
ohboy21
ohboy21

Reputation: 4319

Google Places Autocomplete boundaries doesn't always work

I am using the Google Maps Places API for JavaScript, and set my boundaries to Berlin, Germany.

This is my code (I am using a npm-module for it, but as you see in the console.log, the bounds are getting passed correctly):

import React from 'react';
import ReactDOM from 'react-dom';
import Autocomplete from 'react-google-autocomplete';

document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(<Autocomplete
        style={{width: '90%'}}
        onPlaceSelected={(place) => {
          console.log(place);
        }}
        types={[]}
        bounds={new window.google.maps.LatLngBounds(
                      new window.google.maps.LatLng(51.2, 13.41),
                      new window.google.maps.LatLng(52.5200, 10.40)
                    )}
      />, document.getElementById('mount'));
});

Now, when I try to search for a place nearby, it delivers me a place in India first and then Berlin:

Without the word Berlin: enter image description here

With the word Berlin: enter image description here

My boundaries are set to Berlin: enter image description here

So my question is now: Is this behaviour normal or did I get something wrong? I tried to switch the LatLng just out of curiosity, but same result.

Upvotes: 1

Views: 1412

Answers (2)

Marco Eckstein
Marco Eckstein

Reputation: 4758

Use these bounds:

new google.maps.LatLngBounds(
    new google.maps.LatLng(52.35, 13.1),
    new google.maps.LatLng(52.65, 13.8),
)

Upvotes: 0

Razzildinho
Razzildinho

Reputation: 2584

You should be setting strictBounds to true to limit the results to just the bounds. Otherwise you are favouring that area but results can come from outside.

From the API docs:

  • bounds is a google.maps.LatLngBounds object specifying the area in which to search for places. The results are biased towards, but not restricted to, places contained within these bounds.
  • strictBounds is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input.

Upvotes: 2

Related Questions