Внешний скрипт ReactJs - Карты Google

Причина, по которой вы получаете initMap, не является функцией, потому что помимо src скрипта, который вы указали в конце, является callback = initMap. Это запустит функцию под названием initMap после того, как скрипт завершит загрузку.

Если вы просмотрели документацию на веб-сайте Google, у них есть пример функции, которую вам нужно будет разместить над тегом скрипта для карт Google.

https://developers.google.com/maps/documentation/javascript/tutorial

Как сказал @Naismith, ошибка связана с callback=initMap в вашем скрипте Google Maps. Итак, чтобы это работало, вам нужно будет реализовать функцию initMap следующим образом:

<div id = "map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

За исключением того, что вы пытаетесь отобразить карты в компоненте, в этом случае вы можете попробовать этот подход, при котором вы создаете обещание для API Карт Google и разрешаете это обещание в (глобальной) функции обратного вызова, которую может запустить API Карт Google. Затем в коде вашего компонента вы должны дождаться выполнения обещания, прежде чем продолжить.

class Map extends React.Component {
  getGoogleMaps() {
    if (!this.googleMapsPromise) {
      this.googleMapsPromise = new Promise((resolve) => {
        // Add a global handler for when the API finishes loading
        window.resolveGoogleMapsPromise = () => {
          // Resolve the promise
          resolve(google);

          // Tidy up
          delete window.resolveGoogleMapsPromise;
        };

        // Load the Google Maps API
        const script = document.createElement("script");
        const API = 'AIzaSyDbAz1XXxDoKSU2nZXec89rcHPxgkvVoiw';
        script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=resolveGoogleMapsPromise`;
        script.async = true;
        document.body.appendChild(script);
      });
    }

    // Return a promise for the Google Maps API
    return this.googleMapsPromise;
  }

  componentWillMount() {
    // Start Google Maps API loading since we know we'll soon need it
    this.getGoogleMaps();
  }

  componentDidMount() {
    // Once the Google Maps API has finished loading, initialize the map
    this.getGoogleMaps().then((google) => {
      const uluru = {lat: -25.366, lng: 131.044};
      const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: laos
      });
      const marker = new google.maps.Marker({
        position: laos,
        map: map
      });
    });
  }

  render() {
    return (
      <div>
        <div id = "map" style = {{width: 600, height: 300}}></div>
      </div>
    )
  }
}

ReactDOM.render(
  <Map/>,
  document.getElementById('react')
);