I'm using the react-google-maps package to render a Google Map in my react application. I would like to disable street view.
From the documentation, I see there are props for:
defaultStreetView
streetView
Code snippet here:
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import PropTypes from 'prop-types';
const Map = withScriptjs(withGoogleMap((props) => {
return(
<GoogleMap
defaultZoom={17}
defaultCenter={{ lat: props.lat, lng: props.lng }}
// defaultStreetView={false}
// streetView={false}
>
{props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />}
</GoogleMap>
)
}))
Map.propTypes = {
lat: PropTypes.number.isRequired,
lng: PropTypes.number.isRequired,
isMarkerShown: PropTypes.bool.isRequired
}
export default Map;
setOptions({streetViewControl: false}); removes the pegman control box in the upper left, but still ends up leaving the pegman on the map. If you want to HIDE the Street View control you need to place streetViewControl option before mapTypeId . Otherwise, you end up with the Street View control showing disabled.
Disabling the Default UI You may wish to turn off the API's default UI buttons entirely. To do so, set the map's disableDefaultUI property (within the MapOptions object) to true . This property disables any UI control buttons from the Maps JavaScript API.
It seems the props defaultStreetView and streetView were actually not relevant in this case.
Correct code:
import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import PropTypes from 'prop-types';
const Map = withScriptjs(withGoogleMap((props) => {
return(
<GoogleMap
defaultZoom={17}
defaultCenter={{ lat: props.lat, lng: props.lng }}
options={{streetViewControl: false}}
>
{props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />}
</GoogleMap>
)
}))
Map.propTypes = {
lat: PropTypes.number.isRequired,
lng: PropTypes.number.isRequired,
isMarkerShown: PropTypes.bool.isRequired
}
export default Map;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With