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.


ANSWERS:


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.


 MORE:


 ? I want google maps marker to stay in the centre of the map while camera position can change iOS SDK
 ? Google maps - keep center when zooming
 ? Type 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise<void>'. Ionic 2
 ? Google Map is not showing on live site using Avada theme
 ? Adding google tiles with R
 ? Chrome navigator.geolocation.getCurrentPosition() error 403
 ? How to move inside google maps only with two fingers?
 ? React Native: Alert message doesn't work when called frequently
 ? React native ToolbarAndroid action icon not working
 ? Android 6.0 Permission Error