Google maps JS API shows blue focus border

Question

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.
The element with the border is generated by Gmaps and within their DOM. Border seems to show only in full-page map display.

Tracing Gmap DOM show a border at child of gm-style: (div.gm-style > div)

<div style="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);"></div>

The opacity: 0 is dynamic and change to opacity: 1 after click to another browser tab.
Why Gmaps JS API like this works? Any idea how to clearly remove this square from viewpoint?

Edit:

• blue square shows in Chrome 89 && Mozilla 86
• Steps: open js fiddle link -> focus the map (easy roll map from side to side) -> change browser tab -> go back to tab with jsfiddle example -> blue square JSFiddle example

Opened issue as bug: Google Issuetracker

Oxidase

Seems to show this square from Maps JavaScript API version 3.43 – Oxidase

You need to provide a minimal reproducible example that allows to reproduce the issue. What browser are you using? If I look at the simple map example in Chrome, this does not happen. – Balneology

jsfiddle.net/gjL1wrxd – Oxidase

You should open a new bug in their issue tracker. This seems to only happen with v=3.44 and v=3.43. Version 3.42 does not behave this way. Please cross-link your question in your bug report and the bug report in your question once open. – Balneology

Answer 1

I met the same issue, the CSS works:

.gm-style iframe + div { border:none!important; }

Harvell

Legit lifesaver tysm – Misfeasance

Removing focus indicators is bad practice in general. It's recommended to instead target this selector and customize the indicator to match the style of the page the map is embedded into. The Google Maps code will adjust the opacity from 0 to 1 when the Map is focused, so any customisation regarding the focus indicator will work (except for opacity). Upvoted nevertheless, because finding this selector is painful anyway, so great help. Thanks! – Kerley

In case it's helpful for others: This got rid of the blue border, but there is actually still a black border (I can tell bc I'm using GMaps as a minimap overlaid on GSV). The black border is from the outline property, but I couldn't figure out which element. So I just blanket removed borders/outlines from divs in gmaps: #minimap div { border:none!important; outline:none; }. – Prig

Answer 2

Issue closed as a google maps bug. Bug will be fixed in next GMApi release. Issuetracker Google

Oxidase

Issue seems to not be fixed. Had to use the solution of @SeaTheme – Munford

just happened to me too and thankfully I didnt waste time trying to debug it – Antiknock

Issue was not fixed. – Cruller

Issue not fixed as of Feb 2024. To fix it, add the following to your css .gm-style iframe + div { border:none!important; } – Imogeneimojean

2024 - The issue is still not fixed. – Plerre

Still not fixed Mar 2024, also I'd argue this isn't a bug but rather just UX design (not adding an easy way to customize/disable the border). – Friel

Nothing is fixed. It’s intended for "accessibility", as Google says. It looks ugly and annoying. There is no option to disable this afaik. It's another bad decision from Google. Now we need to hack CSS to fix this. Otherwise it's a breaking change for your UI. And all that divs have no properly selector. The Google devs are terrible. – Norbertonorbie

Answer 3

Yes, It is being caused by a bug that'll hopefully be fixed soon but, fortunately there's option with CSS. Although we can't directly edit the border since it's impossible to access styles within a third-party iframe using CSS, we can make them disappear from the screen.

We can have a container with overflow:hidden. And for the width and height of the iframe, we need to add an extra 2px on each side, which is the size of the border. In total, it should be the desired size + 4px. You can do this manually or with calc.

width: 904px; -- OR -- width: calc(100% + 4px)

The same goes for height.

And we also need to give it a negative margin on all sides.

In this case: margin: -2px;

    .map-container {
      overflow: hidden;
      height: 450px;
      display: flex;
    }

    .map-iframe {
      height: calc(100% + 4px);
      min-width: calc(100% + 4px);
      margin: -2px;
      background-color: #e5e3df;
    }

    <div class="map-container">
        <iframe
          class="map-iframe"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3537.5954957698427!2d2.7761919568658993!3d41.7905716475711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12bb23bd7b467cdd%3A0x967a16eb7b9cd5a2!2sDavid%20Lampista%2Finstalacions(Instal.nova%2Creformes%2C%20taller%20reparacio%20electrodomestics)!5e0!3m2!1ses!2ses!4v1709800556414!5m2!1ses!2ses"
          width="900"
          height="450"
          allowfullscreen=""
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>

If the container has a display:flex, we should modify the min-width instead of the width.

Lusterware