PnP Location Picker Control for SPFx

This location picker control allows you to search and select the location, also allows enter a custom location. also it is easy to use we don’t have to configure for API permissions

Importing location picker control

import { LocationPicker, ILocationPickerItem } from "@pnp/spfx-controls-react/lib/LocationPicker";

Control tag and the attributes

  <LocationPicker
          context={this.props.context}
          label="Location"
          defaultValue={this.state.selectedAddress}
          onChange={(locValue: ILocationPickerItem) => {
            this.setState({ selectedAddress: locValue })
          }
          } />

retrieve value from SharePoint list and assign value to the location picker control

  _getListItem = async () => {
    const item: any = await sp.web.lists.getByTitle("Demo").items.getById(1).select("Title", "Address").get();
    console.log(item);
    this.setState({
      selectedAddress: JSON.parse(item.Address)
    });
  }

Update location picker value to the SharePoint

 _updateListItem = async () => {
    const updatedItem = await sp.web.lists.getByTitle("Demo").items.getById(1).validateUpdateListItem(
      [{
        FieldName: "Address",
        FieldValue: JSON.stringify(this.state.selectedAddress),
      }]);
  }