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
|
import React from 'react';
import { compose, withProps } from 'recompose';
import {
withScriptjs,
withGoogleMap,
GoogleMap,
StreetViewPanorama,
OverlayView,
} from 'react-google-maps';
const getPixelPositionOffset = (width, height) => ({
x: -(width / 2),
y: -(height / 2),
});
const MapWithAMarker = compose(
withProps({
googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
loadingElement: <div style={{ height: '100%' }} />,
containerElement: <div style={{ height: '400px' }} />,
mapElement: <div style={{ height: '100%' }} />,
center: { lat: 49.2853171, lng: -123.1119202 },
}),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap defaultZoom={8} defaultCenter={props.center}>
<StreetViewPanorama defaultPosition={props.center} visible>
<OverlayView
position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}
mapPaneName={OverlayView.OVERLAY_LAYER}
getPixelPositionOffset={getPixelPositionOffset}
>
<div
style={{
background: 'red',
color: 'white',
padding: 5,
borderRadius: '50%'
}}
>
OverlayView
</div>
</OverlayView>
</StreetViewPanorama>
</GoogleMap>
));
class StreetView extends React.Component {
render() {
return (
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
);
}
}
export default StreetView;
|
