title: How to use google-map-react with Next.js?
body: <p>I'm not sure what I'm doing wrong. I'm trying to use <a href="https://www.npmjs.com/package/google-map-react" rel="nofollow noreferrer">google-map-react</a> in my Next.js application. I copied the example on their npm page almost verbatim. Here's the code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import GoogleMapReact from &quot;google-map-react&quot;;
  
  const MapMarker = ({ text }) =&gt; &lt;div&gt;{text}&lt;/div&gt;;
  
  export default function SimpleMap() {
    const defaultProps = {
      center: {
        lat: 10.99835602,
        lng: 77.01502627,
      },
      zoom: 11,
    };
    
    return (
      &lt;div style={{ height: &quot;100vh&quot;, width: &quot;100%&quot; }}&gt;
        &lt;GoogleMapReact
          bootstrapURLKeys={{ key: &quot;MY API KEY IS HERE&quot; }}
          defaultCenter={defaultProps.center}
          defaultZoom={defaultProps.zoom}
        &gt;
          &lt;MapMarker text=&quot;My Marker&quot; /&gt;
        &lt;/GoogleMapReact&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I keep getting this error in the console:</p>
  <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
      at o._getState (index.modern.js?922b:1:2062)
      at new o (index.modern.js?922b:1:3935)
      at constructClassInstance (react-dom.development.js?ac89:13492:1)
      at updateClassComponent (react-dom.development.js?ac89:20423:1)
      at beginWork (react-dom.development.js?ac89:22366:1)
      at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
      at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
      at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
      at beginWork$1 (react-dom.development.js?ac89:27243:1)
      at performUnitOfWork (react-dom.development.js?ac89:26392:1)
      at workLoopSync (react-dom.development.js?ac89:26303:1)
      at renderRootSync (react-dom.development.js?ac89:26271:1)
      at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25577:1)
      at workLoop (scheduler.development.js?bcd2:266:1)
      at flushWork (scheduler.development.js?bcd2:239:1)
      at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
  </code></pre>
  <p>Any idea what's going on?</p>
  <p>Thank you in advance.</p>