title: Google Maps API glitch on large screen
body: <p>I have a google map displayed as a full width banner using the google maps javascript api<br />
  When navigating the map I often see some parts not being rendered until I reach some point<br />
  It seems to happen only on large screen &gt; 2000px (2500px in my case)</p>
  <p>You can see the glitch happening here : <a href="https://codepen.io/DamienGR/pen/poEgMdN" rel="nofollow noreferrer">https://codepen.io/DamienGR/pen/poEgMdN</a> (I've removed my api key but it does the same thing with or without the api key)<br />
  In this example, when I navigate to the east, I always see a grey box about 300px after reaching &quot;Ukraine&quot;. The missing part is displayed only if I keep navigating (but never loads if I stop there)</p>
  <p>I've made a gif so you can see it in case your screen is not large enough to reproduce :</p>
  <p><a href="https://i.stack.imgur.com/aFCl9.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aFCl9.gif" alt="google maps glitch" /></a></p>
  <p>The code :</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px;&quot;&gt;&lt;/div&gt;
      
      &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=&amp;callback=initMap&quot; async defer&gt;&lt;/script&gt;
  
      &lt;script&gt;
      function initMap() {
        var mapOpts = {
            center: {lat: 50.46222396587356, lng: -30.968595685134837},
            zoom: 6,
        };
        
        var map = new google.maps.Map(document.getElementById('map'), mapOpts);
      }
      &lt;/script&gt;
  </code></pre>
  <p>Any idea how I can this fix ?<br />
  Thank you !</p>