Styjun

I'm currently using PlacesService library from Google Maps API. I want to render suggestions for New York City. I added strict_bounds for this matter but I still get results way out of New York as shown in the image.

For the most part it works, but I get many out of bounds suggestions.

/** @private ?this._google.maps.Map The google map object. */
this._map = new this._google.maps.Map(this._mapEl, 
 zoom: 11,
 center: this._mapPosition
);

/** @private this._google.maps.places.AutocompleteAutocomplete instance */
this._service = new this._google.maps.places.AutocompleteService();

/** @private this._google.maps.places.PlaceServicePlaceService instance */
this._placeService = new this._google.maps.places.PlacesService(this._map);

Here is the instance in the constructor.

 // Attach handler for the autocomplete search box. This updates the map
 // position and re-sorts locations around that position.
 this._searchEl.addEventListener('keyup', (event) => 
 if(event.target.value) 
 this._service.getPlacePredictions(
 input: event.target.value,
 offset: 3,
 strictBounds: true,
 types: ['geocode'],
 bounds: this._map.getBounds()
 , (predictions) => 
 if(predictions) 
 let results = predictions.map(e => [e['description']]);

 event.target.missplete = new MissPlete(
 input: event.target,
 options: results,
 className: 'c-autocomplete'
 )

 event.target.missplete.select = () => 
 let msplt = event.target.missplete;

 if (msplt.highlightedIndex !== -1) 
 msplt.input.value = msplt
 .scoredOptions[msplt.highlightedIndex].displayValue;
 msplt.removeDropdown();

 console.dir('we did it');

 
 ;

 event.target.predictions = predictions;

 console.log(event.target.predictions);
 
 );
 
 );

There is a method displayPlacesOnMap that gets an array of Google place objects. Here we get the place_id in order to make use of PlaceService library.

 displayPlacesOnMap(mapItems) 
 if(mapItems) 
 mapItems.forEach(place => 
 let request = 
 placeId: place.place_id,
 fields: ['name', 'formatted_address', 'place_id', 'geometry']
 

 const officeMap = this;

 this._placeService.getDetails(request, function(place, status) 
 if (status === 'OK') 
 officeMap._mapPosition = place.geometry.location;
 officeMap._map.panTo(officeMap._mapPosition);
 officeMap.sortByDistance().clearLocations().updateUrl().updateList()
 .updateUrl();
 $(officeMap._searchEl).blur();
 
 )
 )
 
 ;