1import React, { Component } from 'react';
2import GoogleMapReact from 'google-map-react';
3
4const AnyReactComponent = ({ text }) => <div>{text}</div>;
5
6class SimpleMap extends Component {
7 static defaultProps = {
8 center: {
9 lat: 59.95,
10 lng: 30.33
11 },
12 zoom: 11
13 };
14
15 render() {
16 return (
17 // Important! Always set the container height explicitly
18 <div style={{ height: '100vh', width: '100%' }}>
19 <GoogleMapReact
20 bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
21 defaultCenter={this.props.center}
22 defaultZoom={this.props.zoom}
23 >
24 <AnyReactComponent
25 lat={59.955413}
26 lng={30.337844}
27 text="My Marker"
28 />
29 </GoogleMapReact>
30 </div>
31 );
32 }
33}
34
35export default SimpleMap;
1import React, { Component } from 'react';import GoogleMapReact from 'google-map-react'; const AnyReactComponent = ({ text }) => <div>{text}</div>; class SimpleMap extends Component { static defaultProps = { center: { lat: 59.95, lng: 30.33 }, zoom: 11 }; render() { return ( // Important! Always set the container height explicitly <div style={{ height: '100vh', width: '100%' }}> <GoogleMapReact bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }} defaultCenter={this.props.center} defaultZoom={this.props.zoom} > <AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" /> </GoogleMapReact> </div> ); }} export default SimpleMap;