score:0
to achieve your use case, in your parent component, you need to use a handlechangecenter
function that will set the newvalue of your center and marker then you will pass an onchange
parameter to your child component which calls the handlechangecenter
function.
in your child component, instead of ondrag
function of <googlemap/>
object , you can use the ondragend
and ondragend
, you will call a handlechange
function that gets the current center coordinate of the map on dragend and it will pass the new value to the props of the onchange
changing the state of your center and marker.
here's a sample code and a code snippet below:
parent.js
import react, { usestate, useeffect } from 'react';
import map from './map';
export default function parent() {
const [mapcenter, setmapcenter] = usestate(undefined);
const [markerposition, setmarkerposition] = usestate(undefined);
function handlechangecenter(newvalue) {
setmapcenter(newvalue);
setmarkerposition(newvalue)
}
useeffect(()=>navigator.geolocation.getcurrentposition(position =>
{
setmapcenter({lat:position.coords.latitude, lng:position.coords.longitude})
setmarkerposition({lat:position.coords.latitude, lng:position.coords.longitude})
}
),[])
return(
<div>
{ mapcenter && <map mapcenter={mapcenter} markerposition={markerposition} onchange={handlechangecenter} />}
</div>
)
}
map.js
import react from 'react';
import { googlemap, marker, withgooglemap } from 'react-google-maps';
export default function map(props) {
let mapref;
function handlechange() {
// here, we invoke the callback with the new value
const newcenter = mapref.getcenter().tojson();
console.log(newcenter);
props.onchange(newcenter);
}
const wrappedmap = withgooglemap(() => (
<googlemap
ref={(ref) => (mapref = ref)}
center={props.mapcenter}
zoom={16}
ondragend={handlechange}
>
<marker position={props.markerposition} draggable={false} />
</googlemap>
));
return (
<div style={{ height: '50vh', width: '50vh' }}>
<wrappedmap
loadingelement={<div style={{ height: '100%' }} />}
containerelement={<div id="map" style={{ height: '100%' }} />}
mapelement={<div style={{ height: '100%' }} />}
/>
</div>
);
}
Source: stackoverflow.com
Related Query
- how to make fixed marker in center of google map in react?
- How to style the React google map marker using the given image file
- Google Maps API - How to center marker and map
- How to move marker on the google map react js
- How to make some columns align left and some column align center in React Table - React
- How to make React Create App Production Error Boundary map to source code
- how to make google bots crawl my react website with dynamic urls and display them in google
- How to make element fixed on scroll in React Native?
- How to map an object's keys to make JSON easier to handle in React
- How center the new location of Google Map on React?
- How to rotate marker icon (svg image) in react google maps
- How to make marker always centered when map is moving around?
- How to import google map in react project
- React how to make an input field with a fixed value combined with a dynamic value
- How to make the text to align properly in map pin marker css?
- Using React state, how can I remove markers from a Google map before adding new ones?
- How to make some columns fixed and some columns draggable in React Table - ReactJS
- How to get the state updated of input field of google map api in React app
- How to Fit Boundaries and Center React Google Maps
- How to load a <div> on top of React google map component?
- How to make 3 column grid with map function react
- How to change google map language after first react render?
- How update the location of Google Map on React
- How do I access a Map object using React Google Maps API?
- How to add map markers stored in a JSON feed to an existing React Google Map?
- How to get address based on lat lang lng in react google map
- Google Map API in React: How to assign InfoWindow for each Marker
- React google map api integrating inforWindow on click of marker
- How to update React Google Map after receive data from server
- How to stop the google map from re rendering and keeping just the values in input fields when marker is placed on different locations?
More Query from same tag
- How do you fetch a single item from mongodb and display it? (MERN)
- React: Variable after keyname in map function
- How does dispatching a action creator function work?
- useReducer and useEffect hooks to fetch data
- Using data models to handle API responses
- Route.render(): A valid React element (or null) must be returned
- Reducer not returning updated state
- React not loading image
- Open a table on click of the another td in react js
- Confusion how HOC are used in React
- React hook form how to pass value from custom component to controller with already assign own on change?
- ReactJS: Map through using groupby in lodash
- most efficient way to update a property of a property in a Javascript object for React hooks
- How to Render Select Field using Redux Form and Semantic UI
- Collapse Table changing layout
- How to fetch pdf file and display it using react-pdf library
- How do i recover the packages in each lerna repository after i have deleted the node_modules from the sub folders?
- MirageJs: cannot use axios if I call api with passthrough
- error in no files matching 'yyy.js' were found
- React hooks exhaustive-deps infinite loop with async function which uses state
- How do I call firebase functions from within a react component
- Use Css modules add conditional transition styling to my side navigation
- bind a method with dynamic arguments
- Unable to implement logout functionality using node and passport js
- JS code in functional presentation component
- What’s the best way to create a dynamic header and footer that can be used in both Vue and React applications?
- ReactJS - How to get onFocus and onBlur to work
- React Router Dom react js Blank white screen Show
- ReactJS - warning message 'Hook useEffect has a missing dependency'
- React adding FloatingMenuButton Package Parsing error: Unexpected token