React-google-mapsを使用した地図参照へのアクセスv6 +

Question

react-google-mapsへの最新の変更により、mapHolderRefプロパティが削除されたように見えます。新しいコンポーネントの変更を見ると、内部定数のコンテキスト参照を呼び出すように見えますが、それらを使用する必要はない/簡単に公開されるようです。このmapHolderRefプロパティを言及6.0リリースでノートがありました

paintControl(props) { 
    const { rendered } = this.state; 
    const position = props.position || google.maps.ControlPosition.TOP_CENTER; 
    const map = props.mapHolderRef.getMap(); // This no longer works 
    const controlElement = React.createElement(props.customControl, { map, ...props }); 

    ReactDOM.render(controlElement, this.customControlDiv); 
    this.customControlDiv.style.zIndex = this.props.zIndex || 1; 

    if (!rendered) { 
    this.setState({ rendered: true },() => { 
     map.controls[position].push(this.customControlDiv); 
    }); 
    } 
} 

はもはや小道具を介してアクセスできます：

は、最新バージョンの前に、私はマップにカスタムコントロールを追加するには、以下のような何かをすることができませんでしたしかし、代わりに文脈を通して。私はそれを働かせようとしましたが、それを理解できないようです。

私は現在onMapLoadコールバックを使用して反応マップのインスタンスを取得していますが、実際のGoogleマップへの参照は不足しているようです。私は以下のようにして使用可能な参照を得ることができました：

const map = props.mapHolderRef.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; 

しかし、それは本当にジャンクで間違っているようです。また、複数のコントロールを維持するのではなく、複数のコントロールを作成しているので、何かがオフになっています。私が見逃した新しい文書や、新しいバージョンでは利用できないものがあるかどうかは不明です。

新しいreact-google-mapsバージョンで動作するカスタムコントロールまたはコンポーネントを手に入れた人は誰ですか？

ありがとうございました！

Answer 1

それも、V7.2で、このへの理想的なソリューションが存在しないようですが、よりエレガントな方法で非推奨の参照にリンク7.0のとして導入list of constantsあります

import { MAP } from 'react-google-maps/lib/constants

this Github commmentを参照してください - それはレポの所有者によって支持されました。マックスの答えに追加するには

Answer 2

、これは私はそれがV7.2.0を使用して私のコードで動作するようになってしまった方法です：

import { MAP } from 'react-google-maps/lib/constants'; 

export default class CustomControl extends Component { 
    static contextTypes = { [MAP]: PropTypes.object }; 

    ... 

    // this.context[MAP] returns the google map instance object 
    if (this.context[MAP]) { 
    const map = this.context[MAP]; 
    map.controls[position].push(this.customControlDiv); 
    }