-
-
Save jgimbel/6a36d60e28aaf453d0093ddc47f36533 to your computer and use it in GitHub Desktop.
//Example Usage of custom control | |
export default ({lat, lng, google}) => ( | |
<GoogleMap | |
defaultCenter={{lat, lng}} | |
defaultZoom={14} | |
minZoom={6} | |
google={google} | |
containerStyle={{ height: '575px', width: '100%', position: 'relative' }} | |
> | |
<Marker position={{lat, lng}} /> | |
<MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}> | |
<div>That was easy</div> | |
</MapControl> | |
</GoogleMap> | |
) |
import { Component } from 'react' | |
import { createPortal } from 'react-dom' | |
import { MAP } from 'react-google-maps/lib/constants' | |
import PropTypes from 'prop-types' | |
export default class MapControl extends Component { | |
static contextTypes = { [MAP]: PropTypes.object } | |
componentWillMount() { | |
this.map = this.context[MAP] | |
this.controlDiv = document.createElement('div') | |
this.map.controls[this.props.position].push(this.controlDiv) | |
} | |
componentWillUnmount() { | |
this.map.controls[this.props.position].removeAt(this.divIndex) | |
} | |
render() { | |
return createPortal(this.props.children, this.controlDiv) | |
} | |
} |
Implemented above example It gives an error.
Cannot read property 'ControlPosition' of undefined
Can I know what is wrong with this?
<MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}> <div>That was easy</div> </MapControl>
Implemented above example It gives an error.
Cannot read property 'ControlPosition' of undefined
Can I know what is wrong with this?
<MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}> <div>That was easy</div> </MapControl>
maybe you can try replace google
to window.google
;
or replace google.maps.ControlPosition.BOTTOM_CENTER
to 11
(not recommended)
Wrap the map component with the withScript
HOC so the maps library is loaded.
With this solution, my control was "blinking" every time the map re-rendered, but this didn't happen when I used this solution instead.
My completed component (using React 16.8 Hooks, but using the deprecated-in-16.3 Legacy Context) looks like this:
To be used like this: