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.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.0/leaflet.css">
;
Extract from the example, including the business code, which needs to be modified according to the specific situation
;;const unfoldIcon = ;<Mapcenter=thispropsleafletStorecenterLatlngzoom=thispropsleafletStorezoomzoomControl=falseonClick=thisonMapClickref='map'onViewportChanged= thispropsleafletStorestyle=styleObj><AutoSearchunfoldIcon=unfoldIconhandleClickSearchIcon= thispropsleafletStoreupdateLocation= thispropsleafletStore/></Map>
API
Option | Default | Description |
---|---|---|
position | topleft | any valid LeafLet position |
handleClickSearchIcon | - | The function of the searchbox icon. If it does not exist, the icon will not be displayed. |
updateLocation | - | After searching for a location, what needs to be done besides pan the map to found position,The parameter is(place.geometry.location.lat(),place.geometry.location.lng()) |
unfoldIcon | - | the icon of searchbox |
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.