score:2

there is an easy way of doing this if you are using >= react 16.0:

using a pregenerated div and reactdom.createportal inside the return value of the map component and calling onload with the map parameter to add the div like so:

import react from 'react';
import reactdom from 'react-dom';
import { googlemap, withscriptjs, withgooglemap } from "react-google-maps";
import { compose, withprops } from "recompose";
import menu from "./menu";

// -----------------------------------------------------------------------------------------
// needed to construct google maps in react

const styles = require('../../assets/styles/googlemapstyles.json');
const controlbuttondiv = document.createelement('div');
const handleonload = map => {
  map.controls[google.maps.controlposition.top_right].push(controlbuttondiv);
};

const mymapcomponent = compose(
    withprops({
        googlemapurl: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=your_api_key",
        loadingelement: < div style={{ height: `100%` }} />,
        containerelement: < div style={{ height: `100%` }} />,
        mapelement: < div style={{ height: `100%` }} />
    }),
    withscriptjs,
    withgooglemap
)((props) =>

    <><googlemap
        defaultzoom={15}
        defaultcenter={props.location}
        defaultoptions={{styles: styles,
            disabledefaultui: true}}
        onload={map => handleonload(map)
    >
    </googlemap>,
    reactdom.createportal(<menu />, controlbuttondiv),
    </>
);

i actually did this with google-map-react library but it is the same idea, you just need to add

yesiwanttousegooglemapapiinternals
ongoogleapiloaded={({ map, maps }) => handleonload(map, maps)}

as attributes and do the same thing.


Related Query

More Query from same tag