PlacesSearchBox

The PlacesSearchBox is used to tie in a Google Maps Places search into a text input field using the Google Maps Places SearchBox widget.

info

It's recommended to use the AutocompleteSearchBox over PlacesSearchBox because the AutocompleteSearchBox gives you more options to configure the search box. See the Places widgets page "Summary of classes" for more information on the differences.

PlacesSearchBox extends Evented.

Example usage

const placesSearchBox = G.placesSearchBox('.inputSelector');
placesSearchBox.init().then(() => {
    placesSearchBox.on('places_changed', () => {
        const place = placesSearchBox.getPlace();
        G.marker({
            map: map,
            position: place.geometry.location,
            tooltip: place.name,
        });
        map.fitBounds(placesSearchBox.getPlacesBounds());
    });
});

Creating the PlacesSearchBox object

G.placesSearchBox(input?: PlacesSearchBoxValue, options? PlacesSearchBoxOptions): PlacesSearchBox

There are a few ways that you can setup the PlacesSearchBox object.

No parameters.

G.placesSearchBox(): PlacesSearchBox

const placesSearchBox = G.placesSearchBox();

Pass the options.

G.placesSearchBox(options: PlacesSearchBoxOptions): PlacesSearchBox

Parameter	Type	Required	Description
options	PlacesSearchBoxOptions	Yes	The options.

const placesSearchBox = G.placesSearchBox({
    input: '#inputId'
});

Pass the input selector.

G.placesSearchBox(input: HTMLInputElement | string): PlacesSearchBox

Parameter	Type	Required	Description
input	HTMLInputElement | string	Yes	The input selector.

const placesSearchBox = G.placesSearchBox('#inputId');

Pass the input selector and the options.

G.placesSearchBox(input: HTMLInputElement | string, options: PlacesSearchBoxOptions): PlacesSearchBox

Parameter	Type	Required	Description
input	HTMLInputElement | string	Yes	The input selector.
options	PlacesSearchBoxOptions	Yes	The options.

const myTextField = document.querySelector('.myInput');
const placesSearchBox = G.placesSearchBox(myTextField, {bounds: myLatLngBoundsObject});

Pass an existing PlacesSearchBox object.

G.placesSearchBox(object: PlacesSearchBox): PlacesSearchBox

In this case the PlacesSearchBox object is simply returned.

Parameter	Type	Required	Description
object	PlacesSearchBox	Yes	A PlacesSearchBox object.

const placesSearchBox = G.placesSearchBox(placesSearchBoxObject);

PlacesSearchBox value type

The PlacesSearchBoxValue can be one of the following values:

• PlacesSearchBox object
• PlacesSearchBoxOptions object
• An HTMLInputElement object that is the text input to associate the search box with.
• A string CSS selector for the text input to associate the search box with. Any valid selector for document.querySelector can be used.

PlacesSearchBox options

Type PlacesSearchBoxOptions

Option	Type	Default	Description
bounds	LatLngBoundsValue		A LatLngBounds value type.
input	HTMLInputElement | string		The input selector.

Events

Below are the events that the AutocompleteSearchBox will emit.

Event	Description
places_changed	Called when the user selects a Place.

places_changed

placesSearchBox.on('places_changed', (event) => {
    // Handle the event
    console.log('Places: ', event.places);
    console.log('Bounds: ', event.bounds);
});

// Or, you can destructure the Event object
placesSearchBox.on('places_changed', ({places, bounds}) => {
    // Handle the event
    console.log('Places: ', places);
    console.log('Bounds: ', bounds);
});

// Or you can call methods to get the data
placesSearchBox.on('places_changed', () => {
    // Handle the event
    console.log('Place: ', placesSearchBox.getPlace());
    console.log('Bounds: ', placesSearchBox.getPlaceBounds());
});

// You can use the constant for the event name
placesSearchBox.on(G.PlacesSearchBoxEvents.PLACES_CHANGED, () => {
    // Handle the event
    console.log('Place: ', placesSearchBox.getPlace());
    console.log('Bounds: ', placesSearchBox.getPlaceBounds());
});

// Or you can can use the event function
placesSearchBox.onPlacesChanged(() => {
    // Handle the event
    console.log('Place: ', placesSearchBox.getPlace());
    console.log('Bounds: ', placesSearchBox.getPlaceBounds());
});

Properties

• Properties inherited from Layer.

Property	Type	Description
bounds	LatLngBoundsValue	A LatLngBounds value type.
input	HTMLInputElement | string	The input selector.

bounds

Get and set the region to use for biasing query predictions. The value returned is the same as getBounds.

Get the bounds. A LatLngBounds object is returned if the bounds exist, otherwise undefined is returned.

const bounds = placesSearchBox.bounds;

Set the bounds.

placesSearchBox.bounds = myLatLngBoundsObject;

input

Get and set the selector for the text input to associate the search box with.

const input = placesSearchBox.input;

placesSearchBox.input = document.querySelector('.inputClass');
// Or
placesSearchBox.input = '.inputClass';

Methods

• Methods inherited from Evented.
• Methods inherited from Base.

getBounds

getBounds(): LatLngBounds | undefined

Get the bounds to which query predictions are biased.

const bounds = placesSearchBox.getBounds();

getPlace

getPlace(): google.maps.places.PlaceResult | undefined

Gets the first place that has been found. The results from the places_changed event is typically one place and it's the place that the user clicked on.

const place = placesSearchBox.getPlace();

getPlaces

getPlaces(): google.maps.places.PlaceResult[] | undefined

Get the places that have been found. An array is returned, but typically the array has just one value and that's the place that the user clicked on.

const places = placesSearchBox.getPlaces();

getPlacesBounds

getPlacesBounds(): LatLngBounds | undefined

Get the map bounds based on the places that have been found. This value is available after the user selected a place.

This is often used to update the map bounds to show the selected place.

myMap.fitBounds(placesSearchBox.getPlacesBounds());

init

init(): Promise<void>

Initialize the places search box object. Call this after you've set the input selector.

important

This must be called in order for the places search box to work.

const placesSearchBox = G.placesSearchBox('.inputSelector');
placesSearchBox.init().then(() => {
    placesSearchBox.on('places_changed', () => {
        const place = placesSearchBox.getPlace();
        G.marker({
            map: map,
            position: place.geometry.location,
            tooltip: place.name,
        });
        map.fitBounds(placesSearchBox.getPlacesBounds());
    });
});

isInitialized

isInitialized(): boolean

Returns whether the places search box object has been initialized.

if (placesSearchBox.isInitialized()) {
    // Do something
}

onPlacesChanged

onPlacesChanged(callback: (places: google.maps.places.PlaceResult[], bounds: LatLngBounds) => void): void

Event handler for when the user selects a place.

This is an alternate option to doing:

placesSearchBox.on('places_changed', (event) => {
    // Handle the event
    console.log('Places: ', event.places)
});

Instead, you can do this:

placesSearchBox.onPlacesChanged((places, bounds) => {
    const place = places[0];
    G.marker({
        map: map,
        position: place.geometry.location,
        tooltip: place.name,
    });
    map.fitBounds(bounds);
});

// Or you can call methods to get the data
placesSearchBox.onPlacesChanged(() => {
    // Handle the event
    console.log('Place: ', placesSearchBox.getPlace());
    console.log('Bounds: ', placesSearchBox.getPlaceBounds());
});

setBounds

setBounds(value: LatLngBoundsValue): PlacesSearchBox

Sets the region to use for biasing query predictions. Results will only be biased towards this area and not be completely restricted to it.

Parameter	Type	Required	Description
bounds	LatLngBoundsValue	Yes	A LatLngBounds value type.

placesSearchBox.setBounds(myLatLngBoundsObject);

setInput

setInput(value: LatLngBoundsValue): PlacesSearchBox

Set the selector for the text input to associate the search box with.

Parameter	Type	Required	Description
input	HTMLInputElement | string	Yes	The input selector.

placesSearchBox.setInput('.myInputSelector');

setOptions

setOptions(options: PlacesSearchBoxOptions): PlacesSearchBox

Set the options for the places search box.

Parameter	Type	Required	Description
options	PlacesSearchBoxOptions	Yes	The places search box options.

placesSearchBox = G.placesSearchBox();
placesSearchBox.setOptions({
    input: '#inputId'
});