-
-
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) | |
} | |
} |
My completed component (using React 16.8 Hooks, but using the deprecated-in-16.3 Legacy Context) looks like this:
import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { MAP } from 'react-google-maps/lib/constants';
import PropTypes from 'prop-types';
export default function CustomDrawingManagerControl(
{ position = window.google.maps.ControlPosition.TOP_LEFT, children },
context
) {
const map = context[MAP];
const controlDiv = document.createElement('div');
useEffect(() => {
const controls = map.controls[position];
const index = controls.length;
controls.push(controlDiv);
return () => {
controls.removeAt(index);
};
});
return createPortal(
<div style={{ marginLeft: 16, marginTop: 16 }}>{children}</div>,
controlDiv
);
}
CustomDrawingManagerControl.contextTypes = {
[MAP]: PropTypes.object,
};
To be used like this:
<GoogleMap {...props}>
<CustomMapControl position={google.maps.ControlPosition.BOTTOM_CENTER}>
<div>That was easy</div>
</CustomMapControl>
</GoogleMap>
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.
For any other confused travelers,
react-google-maps
uses React's Legacy Context API instead of the current one. This was relevant for me because I was trying to get this done in a functional component. So my code looks roughly like:Please note that the 16.3 release of React deprecated this API, although it will be included in all 16.x releases.
react-google-maps
hasn't been updated in a year. Not sure if it's still being maintained.