File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1- # react-google-map
1+ # React Google Map Wrapper
22
3- Google map react componentize project
4-
5- ## TO DO
6-
7- - [x] GoogleMapApiLoader
8- - [x] GoogleMap
9- - [x] Marker
10- - [x] Custom Marker
11- - [x] Controls
12- - [x] InfoWindow
13- - [x] Polyline
14- - [x] Polygon
15- - [x] Rectangle
16- - [x] Circle
17- - [ ] AdvancedMarkerView
18- - [x] MarkerClusterer
19- - [x] HeatmapLayer
20-
21- ## DEMO
22-
23- [ Demo Link] ( https://pyjun01.github.io/react-google-map )
24-
25- ``` tsx
26- function App() {
27- const [lat, setLat] = useState (32 );
28- const [lng, setLng] = useState (127.0038 );
29- const [draggable, setDraggable] = useState (true );
30-
31- return (
32- <div >
33- <Suspense fallback = ' loading google map api' >
34- <GoogleMapApiLoader apiKey = { ... } suspense >
35- <GoogleMap
36- center = { {
37- lat: 37.3752 ,
38- lng: 127.0038
39- }}
40- zoom = { 4 }
41- style = { {
42- height: ' 600px'
43- }}
44- >
45- <CustomMarker
46- lat = { lat }
47- lng = { lng }
48- onDrag = { ({ lat , lng }) => {
49- setLat (lat );
50- setLng (lng );
51- }}
52- draggable = { draggable }
53- >
54- <div onClick = { console .log } >
55- Hello, Draggable! ({ lat } , { lng } )
56- <button onClick = { () => setLng (130 )} >Set lng</button >
57- <button onClick = { () => setDraggable (! draggable )} >toggle draggable</button >
58- </div >
59- </CustomMarker >
60- <Marker lat = { 20 } lng = { 127.0038 } title = ' Test' draggable />
61- </GoogleMap >
62- </GoogleMapApiLoader >
63- </Suspense >
64- </div >
65- );
66- }
67- ```
3+ ` react-google-map-wrapper ` is a React component library for rendering Google Maps.
You can’t perform that action at this time.
0 commit comments