React Google Maps API unable to change the heading

Question

I am using the package react-google-maps/api and want to change the heading of the maps. Any suggestions as to how it would be possible to do so?

I have tried to add the heading in the <GoogleMap/> Component and I’ve also tried passing the values in the options section of the Component but it still won't work.

<GoogleMap
  mapContainerStyle={containerStyle}
  center={center}
  gestureHandling="greedy"
  onLoad={onLoad}
  onUnmount={onUnmount}
  options={{
    scrollwheel: true,
    disableDefaultUI: true,
    auto: true,
    noClear: true,
    backgroundColor: 'white',
    enableHighAccuracy: true,
    isFractionalZoomEnabled: true,
    scaleControlOptions: true,
    zoomControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    fullscreenControl: false,
    zoom: 15,
    gestureHandling: 'greedy',        
  }}          
>

Answer 1

Heading and tilting are only supported by vector map. In order to use a vector map, there are two steps:

1. Create a mapID that uses vector map in your Map Management space. (Remember to set MapType to Javascript, choose Vector as the rendering type, and check rotation)
2. Set the heading in the options prop, and mapID needs to be in the options prop as well according to the PR.

<GoogleMap
    mapContainerStyle={containerStyle}
    center={center}
    zoom={10}
    onLoad={onLoad}
    onUnmount={onUnmount}
    options = {{
        mapId: 'your-map-id',
        heading: 180
    }}
>