Маркер не отображается в приложении Next/React | @react-google-maps/api

Исправление компонента Marker

Пакет Npm: @react-google-maps/api

Сегодня я работал с React Google Map Api и все думал и ломал голову, почему же маркер не отображается в приложении? Я настроил буквально все в файле, над которым я работал, и это включало: проверку Google Map API, перепроверку всего кода, перепроверку опечаток, перепроверку импорта.

И все это, но он все равно не работает. И знаете, что еще хуже? Когда я пытаюсь console.log(), компонент Marker просто случайно появляется, и это заставило меня усомниться в себе и в коде, который я писал.

В любом случае, если ваш проект React/NextJS имеет версию React 18, оказалось, что для того, чтобы компонент Marker отображался, необходимо удалить StrictMode из проекта.

Удаление StrictMode из ReactJS

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

на

ReactDOM.render(
    <App />
  document.getElementById('root')
);

Удаление StrictMode из NextJS

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false
}

После этого ваш код должен работать и компонент Marker должен появиться!