score:0
The feature you're looking for is called motionTracking
.
With react-google-maps
, I assume you're using the StreetViewPanorama
component in your code. There's two props on it: defaultMotionTracking
and motionTracking
. Set defaultMotionTracking
to false.
Otherwise the default ends up:
Whether motion tracking is on or off. Enabled by default when the motion tracking control is present, so that the POV (point of view) follows the orientation of the device. This is primarily applicable to mobile devices. If motionTracking is set to false while motionTrackingControl is enabled, the motion tracking control appears but tracking is off. The user can tap the motion tracking control to toggle this option.
See react-google-maps docs & Google Maps Platform docs.
EDIT: Per your example, here's a possible solution (haven't tested, but conceptually should work):
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow, } from 'react-google-maps'
import Image from 'semantic-ui-react/dist/commonjs/elements/Image/Image'
class MapInfoComponent extends Component {
state = {
openInfoWindow: true,
}
onMarkerClick = () => {
this.setState(prevState => ({
openInfoWindow: !prevState.openInfoWindow,
}))
}
buildGoogleMap() {
return (
<GoogleMap defaultZoom={10} center={{ lat: 16.4555, lng: 14.1257, }}>
<Marker position={{ lat: 16.4555, lng: 14.1257, }} onClick={this.onMarkerClick}>
{this.state.openInfoWindow && (
<InfoWindow onCloseClick={this.onMarkerClick}>
<Image src={logo} size="small" />
</InfoWindow>
)}
</Marker>
</GoogleMap>
)
}
render() {
const googleMap = this.buildGoogleMap();
googleMap.getStreetView().setMotionTracking(false);
return googleMap;
}
}
Source: stackoverflow.com
Related Query
- 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
- Google maps in react
- Display Directions with React Google Maps
- Implementing google maps with react
- Creating Custom Buttons in React Google Maps
- Create Google Maps Circle and set its radius in React
- Add tooltip on markers for google maps react
- 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"
- React jest testing Google Maps Api , Uncaught TypeError: this.autocomplete.addListener is not a function
- Reactjs web app google maps working on PC localhost but not on mobile
- React Google maps API initMap not a function, no packages
- React Google Maps custom marker rotation
- React and Google Maps with google-maps-react, cant get to API's methods
- How to incorporate <script> in React to add Google Maps instance
- How to Fit Boundaries and Center React Google Maps
- Google Maps React Polygon Issues
- Google maps marker size with react
- React google maps Markers disappear after component re-render
- Lazy load Google Maps library in React with TypeScript
- React Google Maps module - How to handle GeoJSON MultiPolygons
- Cannot read property 'maps' of undefined - Google Maps - React JS
More Query from same tag
- How to lazy mount Material UI tab panels or to know when a tab panel is visible?
- Reuse const object in react
- How to setState with Firebase user data?
- Using a render method instead of direct return
- How to deal with react, react-dom, @types/react and @types/react-dom package versions?
- Layout two demos from material-ui documentation
- How do I add type definitions for React's useContext?
- React map inside map
- How to redirect after success from ajax call using React?
- What happens when we use this.setState() in ReactJS?
- how to use iframe in react.js
- React Controlled Components not receiving inputs properly
- Mozilla PDF - how to view PDFs from url in react app?
- the page body doesn't show
- admin on rest custom filter
- Navigating inside a function in react
- Local images no loading on React
- How to get transitions to work each time an element is clicked
- Validation using Yup to check array length --> error if length === 1
- Start countdown for N number of items on first render
- Stop click from propagating to a parent
- Unable to open downloaded file embedded file link in a webpage because file format or extension is not valid
- Issue with Cors in React.js localhost and Node Express server
- Which way is better to change specific item in array of objects in react?
- Destructuring props in the function parameters using TypeScript
- React Material UI Custom Input hide/show password
- Correct way to make single conditional call to React Hooks' useFetch function?
- Getting dynamic width of div after rendering
- Difference between react.js and Ajax
- Reactjs do not re-render when children node changed