npm install react-leaflet-google-places-searchbox

react-leaflet-google-places-searchBox

React-Leaflet plugin for Google Places SearchBox, Support for custom menus.

Installation

npm install --save react-leaflet-google-places-searchbox

Usage

Make sure you have Google Places library with valid Google API key loaded on page.
``

 html

 javascript
import AutoSearch from 'react-leaflet-google-places-searchbox';


Extract from the example, including the business code, which needs to be modified according to the specific situation

 javascript
import {Map} from 'react-leaflet';
import AutoSearch from 'react-leaflet-google-places-searchbox';
const unfoldIcon = require('../../img/menu_unfold.svg');
  center={this.props.leafletStore.centerLatlng}
  zoom={this.props.leafletStore.zoom}
  zoomControl={false}
  onClick={this.onMapClick}
  ref='map'
  onViewportChanged={viewport => this.props.leafletStore.setViewportChange(viewport)}
  style={styleObj}
  >
        unfoldIcon={unfoldIcon}
    handleClickSearchIcon={() => this.props.leafletStore.setShowMenu(true)}
    updateLocation={(lat, lng) => this.props.leafletStore.setMakerPosition({lat, lng})}
    />

API

Demo

There is a demo in the project. Fill in the googlekey in the leafletmapview file with a valid value,You can execute npm test to test locally.

!Example

References

leaflet-google-places-autocomplete