How do I initialize a map in street view mode using react-google-maps

Question

I've implemented the default react-google-map component and it is displaying the map correctly. However, is there a way to initialize it into street view with a given coordinate?

Original code I would like to modify below:

const Map = compose(
  withProps({
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withGoogleMap
)(props => (
  <GoogleMap
    defaultZoom={18}
    defaultCenter={{ lat: props.coord.lat, lng: props.coord.lng }}
  >
    {true && (
      <Marker position={{ lat: props.coord.lat, lng: props.coord.lng }} />
    )}
  </GoogleMap>
));

score 0 · Accepted Answer · answered Aug 19 '18 at 14:42

0

I have shared codesandbox for streetViewPanorama. But you need to add your API key in map url. codesandbox : https://codesandbox.io/s/147kvk67zj

Feel free to ask any question.

answered Aug 19 '18 at 14:42

Sakhi Mansoor

7,832
5
22
37

Thanks Sakhi! That's really helpful. Is there any way to point the camera to the coordinates? E.g. Have the camera facing where you have placed the OverlayView when the Street View loads? – Imran NZ Aug 19 '18 at 21:12
Nevermind, found that you can add the options with a heading. – Imran NZ Aug 19 '18 at 23:17

score 0 · Answer 2 · answered May 16 '22 at 16:08

0

<LoadScript googleMapsApiKey={api}>
  <GoogleMap
    mapContainerStyle={{width: "100%", height: "100%"}}
    center={center}
    zoom={10}
    options={options}
  >
    <StreetViewPanorama position={center} visible={true}/>
  </GoogleMap>
</LoadScript>

answered May 16 '22 at 16:08

Максим Рязанцев

1
1

How do I initialize a map in street view mode using react-google-maps

2 Answers2