Ошибка "https://khms0.googleapis.com/kh?v=818&hl=en-US&x=16384&y=16384&z=15" при попытке переключиться на вид со спутника из вида карты

Question

Я использую реагирующее Google-карты для интеграции служб определения местоположения в мой проект, и он прекрасно работает. Однако из последних 24 часов я вижу ошибку ниже, когда я пытаюсь переключить вид карты на вид со спутника.

ошибка: - https://khms0.googleapis.com/kh?v=818&hl=en-US&x=16384&y=16384&z=15

Когда я немного покопался, я придумал это - https://productforums.google.com/forum/, но не смог понять. Кто-нибудь, пожалуйста, помогите.

Вот код, который я использую для поиска местоположения и нанесения маркера:- MapView.js

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import SearchBox from '../../node_modules/react-google-maps/lib/components/places/SearchBox';

class MapView extends Component {
   constructor(props) {
      super(props);
      this.state = {
         bounds: null,
         center: {
            lat: 0,
            lng: 0
         },
         markers: [],
      };
      this.handleMapMounted = this.handleMapMounted.bind(this);
      this.handleBoundsChanged = this.handleBoundsChanged.bind(this);
      this.handleSearchBoxMounted = this.handleSearchBoxMounted.bind(this);
      this.handlePlacesChanged = this.handlePlacesChanged.bind(this);
   }

   handleMapMounted(map) {
        this._map = map;
   }

   handleBoundsChanged() {
        this.setState({
          bounds: this._map.getBounds(),
          center: this._map.getCenter(),
        });
   }

   handleSearchBoxMounted(searchBox) {
        this._searchBox = searchBox;
   }
    handlePlacesChanged() {
        const places = this._searchBox.getPlaces();

        // Add a marker for each place returned from search bar
        const markers = places.map(place => ({
          position: place.geometry.location,
        }));

        // Set markers; set map center to first search result
        const mapCenter = markers.length > 0 ? markers[0].position : this.state.center;

        this.setState({
          center: mapCenter,
          markers,
        });
   }
   render() {
    return (
            <div style={{height: `400px`}}>
            <MyMapComponent
               center={this.state.center}
               onMapMounted={this.handleMapMounted}
               onBoundsChanged={this.handleBoundsChanged}
               onSearchBoxMounted={this.handleSearchBoxMounted}
               bounds={this.state.bounds}
               onPlacesChanged={this.handlePlacesChanged}
               markers={this.state.markers}
               googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCl1qwhktyUgLjFtrUCnwbZATFwkdREUUE&v=3.exp&libraries=geometry,drawing,places"
               loadingElement={<div style={{ height: `100%` }} />}
               containerElement={<div style={{ height: `100%` }} />}
               mapElement={<div style={{ height: `100%`}} />}
            />
            </div>

      );
   }
}

Вот мой MyMapComponent.js:-

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import SearchBox from '../../node_modules/react-google-maps/lib/components/places/SearchBox';
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={15}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
   // defaultCenter={{ lat: 12.9822038, lng: 77.7235833 }}
  >

  <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}>
     <input
        text="text"
        placeholder="Search location..."
        style={{
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `300px`,
          height: `40px`,
          marginTop: `10px`,
          padding: `0 12px`,
          borderRadius: `5px`,
          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
          fontSize: `14px`,
          outline: `none`,
          textOverflow: `ellipses`,
        }}/>
   </SearchBox>

    {props.markers.map((marker, index) => (
      <Marker position={marker.position} key={index} />
    ))}
  </GoogleMap>
));