Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable street view with react-google-maps?

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

I have tried using both with false - but neither works. Does anyone know how to disable street view functionality via this package?

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;
like image 970
stevanpopo Avatar asked Feb 20 '19 12:02

stevanpopo


People also ask

How do I hide Pegman on Google Maps?

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.

How do I turn off controls in Google Maps?

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.


1 Answers

It seems the props defaultStreetView and streetView were actually not relevant in this case.

The way to implement this is to pass { streetViewControl: false } to the options prop.

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;
like image 74
stevanpopo Avatar answered Oct 06 '22 02:10

stevanpopo