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.
Source: stackoverflow.com
Related Query
- Creating Custom Buttons in React Google Maps
- Custom Overlays for Google Maps v3 using React
- Creating FullCalendar Custom Buttons in React
- React Google Maps custom marker rotation
- Use a React Component as a custom OverlayView in Google Maps
- Google maps in React without custom library: cannot read property setState of null
- Creating custom function in React component
- How to load the google maps api <script> in my react app only when it is required?
- How to implement Google Maps JS API in React without an external library?
- React Google Maps Unable to set scroll zoom off
- How to implement Google Maps search box in a React application
- Creating Custom UI component for android on React Native fails. App crashes
- How to embed Google Custom Search in React App?
- Creating a Custom Button in React Typescript and add onClick Event
- Google maps in react
- Creating custom PropTypes that extend default PropTypes in react
- Creating custom react package library
- Display Directions with React Google Maps
- Implementing google maps with react
- Creating a custom Leaflet layer control in React
- Creating custom Input type file button in React
- Create Google Maps Circle and set its radius in React
- Add tooltip on markers for google maps react
- React Google Maps API Autocomplete suggestions are behind the Dialog
- Google maps react have HeatMap?
- React google maps re-render issue using onBoundsChanged
- Steps to integrate AWS Cognito with both google and custom login with React
- React Google Maps Api :Cannot read properties of undefined reading 'emit'
- How to rotate marker icon (svg image) in react google maps
- Google Maps with React - "Required props loadingElement or googleMapURL is missing. You need to provide both of them"
More Query from same tag
- Material UI material-table TablePagination issue. (React)
- Jest Enzyme test error :Could not find "store" in the context of "Connect(App)"
- How to convert a blob file to a specific format?
- Fetching values from this.props.children
- React setTimeout calling order
- img tag lags a bit, showing the old page image for a second or two, and then showing the new image in react
- React app testing, how to test an axios post request with Jest?
- ReactJS Promise resolve() doesn't pass the value to .then() but reject() pass the value to .catch()
- React router not showing browser history
- Jest spyOn is not a function
- Error with && logical operator jsx and typescript
- Make a GET-request to an endpoint API and use data
- Different colors for different h1 titles in differents components with React
- Typescript declaration for conditional react props
- form submission in react js
- React Datepicker input state not changing?
- why axios convert http request to https in reactjs
- How do I pass only related prop when using map function in react?
- Argument of type 'Element[]' is not assignable to parameter of type 'Element'
- Any help to undefined parameter when I was going to pass the map index to my component
- setInterval inside useEffect hook
- Why is there a difference in style between the 2 divs?
- React element is not rendering / React Setup Issue
- Best practice to prevent state update warning for unmounted component from a handler
- it is not working can somebody give any suggestions?
- Closing a pop-up component and setting state to False after clicking outside the component in the background
- How to map through objects in React
- How to make vs code autocomplete React component's prop types?
- How to configure correctly Firebase and get data in Firestore
- webpack production build not working