title: Google maps JS API shows blue focus border
body: <p>Google Maps JS API began displaying blue focus border around the map after switching to another browser tab and then go back. Once the map is clicked the border vanishes. <br>
  The element with the border is generated by Gmaps and within their DOM. Border seems to show only in full-page map display.<br><br>
  <a href="https://i.stack.imgur.com/rekiF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rekiF.jpg" alt="enter image description here" /></a></p>
  <p>Tracing Gmap DOM show a border at child of gm-style: (div.gm-style &gt; div)</p>
  <pre><code>&lt;div style=&quot;pointer-events: none; width: 100%; height: 100%;
             box-sizing: border-box; position: absolute; z-index: 1000002;
             opacity: 0; border: 2px solid rgb(26, 115, 232);&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>The opacity: 0 is dynamic and change to opacity: 1 after click to another browser tab.<br />
  Why Gmaps JS API like this works? Any idea how to clearly remove this square from viewpoint?</p>
  <p>Edit:</p>
  <ul>
  <li>blue square shows in Chrome 89 &amp;&amp; Mozilla 86</li>
  <li>Steps: open js fiddle link -&gt; focus the map (easy roll map from side to side) -&gt; change browser tab -&gt; go back to tab with jsfiddle example -&gt; blue square
  <a href="https://jsfiddle.net/gjL1wrxd/" rel="nofollow noreferrer">JSFiddle example</a></li>
  </ul>
  <p>Opened issue as bug:
  <a href="https://issuetracker.google.com/issues/182937497" rel="nofollow noreferrer">Google Issuetracker</a></p>