Repository navigation
Expand file tree
/
Copy pathSearchbox.js
More file actions
70 lines (61 loc) · 1.62 KB
/
Copy pathSearchbox.js
File metadata and controls
70 lines (61 loc) · 1.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { Component } from 'react';
import isEmpty from 'lodash.isempty';
// components:
import Marker from '../components/Marker';
// examples:
import GoogleMap from '../components/GoogleMap';
import SearchBox from '../components/SearchBox';
// consts
import LOS_ANGELES_CENTER from '../const/la_center';
class Searchbox extends Component {
constructor(props) {
super(props);
this.state = {
mapApiLoaded: false,
mapInstance: null,
mapApi: null,
places: [],
};
}
apiHasLoaded = (map, maps) => {
this.setState({
mapApiLoaded: true,
mapInstance: map,
mapApi: maps,
});
};
addPlace = (place) => {
this.setState({ places: place });
};
render() {
const {
places, mapApiLoaded, mapInstance, mapApi,
} = this.state;
return (
<>
{mapApiLoaded && <SearchBox map={mapInstance} mapApi={mapApi} addplace={this.addPlace} />}
<GoogleMap
defaultZoom={10}
defaultCenter={LOS_ANGELES_CENTER}
bootstrapURLKeys={{
key: process.env.REACT_APP_MAP_KEY,
libraries: ['places', 'geometry'],
}}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => this.apiHasLoaded(map, maps)}
>
{!isEmpty(places)
&& places.map((place) => (
<Marker
key={place.id}
text={place.name}
lat={place.geometry.location.lat()}
lng={place.geometry.location.lng()}
/>
))}
</GoogleMap>
</>
);
}
}
export default Searchbox;