score:1
default properties like defaultcenter
could only be set as initial state, center
property could be used instead to re-render (center) the map.
the following example demonstrates how to center the map based on current location
class app extends react.component {
constructor(props) {
super(props)
this.state = {
currentlatlng: {
lat: 0,
lng: 0
},
ismarkershown: false
}
}
showcurrentlocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getcurrentposition(
position => {
this.setstate(prevstate => ({
currentlatlng: {
...prevstate.currentlatlng,
lat: position.coords.latitude,
lng: position.coords.longitude
},
ismarkershown: true
}))
}
)
} else {
error => console.log(error)
}
}
componentdidmount() {
this.showcurrentlocation()
}
render() {
return (
<div>
<mapwithamarker
ismarkershown={this.state.ismarkershown}
currentlocation={this.state.currentlatlng} />
</div>
);
}
}
where
const mapwithamarker = compose(
withprops({
googlemapurl: "https://maps.googleapis.com/maps/api/js",
loadingelement: <div style={{ height: `100%` }} />,
containerelement: <div style={{ height: `400px` }} />,
mapelement: <div style={{ height: `100%` }} />,
}),
withscriptjs,
withgooglemap
)((props) =>
<googlemap
defaultzoom={8}
center={{ lat: props.currentlocation.lat, lng: props.currentlocation.lng }}
>
{props.ismarkershown && <marker position={{ lat: props.currentlocation.lat, lng: props.currentlocation.lng }} onclick={props.onmarkerclick} />}
</googlemap>
)
Source: stackoverflow.com
Related Query
- How to use a react component for showing Google Maps InfoWindow
- Marker missing from React Geolocation Google Maps API
- How to implement geolocation in a react app with Google Maps JS API instead of hard-coded location?
- React + Google Maps + Material UI: Is it possible to use React components inside an InfoWindow?
- Use a React Component as a custom OverlayView in Google Maps
- How to load the google maps api <script> in my react app only when it is required?
- How can I use React with Google Places API, to display place markers on a Google map?
- 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
- Google maps in react
- Display Directions with React Google Maps
- How to use google translation api with react
- Implementing google maps with react
- Creating Custom Buttons in React Google Maps
- Create Google Maps Circle and set its radius in React
- Update Google Map based on Geolocation with React
- Add tooltip on markers for google maps react
- How to use Google fonts in a React application using Next.js
- Custom Overlays for Google Maps v3 using React
- React Google Maps API Autocomplete suggestions are behind the Dialog
- Google maps react have HeatMap?
- React google maps re-render issue using onBoundsChanged
- 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"
- How to use Google fonts in a window.open in React
- How to use a ReactJS component as content string for Google Maps API Infowindow
- React jest testing Google Maps Api , Uncaught TypeError: this.autocomplete.addListener is not a function
- React Google maps API initMap not a function, no packages
More Query from same tag
- React Custom Hook make return Function executable on an Event
- how to show only login page using material-ui in reactjs?
- Why does the content only render after onChange?
- Variable inside UseEffect on React.js
- Passing state after .setState() to child component but not showing up in this.props for child component
- React hooks change the state on postMessage
- Ensuring React set hook runs synchronously in order
- How to solve TypeScript `possibly null` error within ternary?
- why my current project in reactjs included this "theme": "lessc --js src/App.less src/App.css", in package.json scripts?
- Show hide toggle List Component AntDesign
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- How to handle 15+ useStates in reactJS
- React render object is not extensible
- How to set state based on document.body but before render (react)
- Problems with useState
- How to pass a state className variable to another component in react
- Conditional Props in React (ACCEPT only 1 of 2 props)
- Redux connect works but now for all properties from the state
- Passing component as prop to child component
- React - unexpected token, expected ;
- React: filter array list using Multiple CheckBoxes
- Visual studio code: how to automatically change the matching closing tag
- Rails DELETE route not working properly / not calling the controller function
- React: Understanding import statement
- how to set the antd table page size in reactjs
- Passing a function as a parameter that will be an onClick event
- how to store and iterate through array of objects
- How can I create a web service endpoint for a locally served JSON file
- Replace the array of elements using another array of elements if its have both common value
- How to fix "500 TypeError: Cannot read property 'split' of null" in reacts typescript application