Remove The Tabindex The Google Maps In My Page

I need to remove the tabindex the map on my page. I used the code below but the tab passes through the markers on the map and the Google logo. var map = new google.maps.Map(documen

Solution 1:

Building off Vasil's answer

google.maps.event.addListener(MAP, "tilesloaded", function(){
    [].slice.apply(document.querySelectorAll('#map a')).forEach(function(item) {
        item.setAttribute('tabindex','-1');
    });
})

Here is it in action.

Solution 2:

[].slice.apply(document.querySelectorAll('#map a')).forEach(function(item) { 
   item.removeAttribute('tabindex'); 
});

Some like that

Solution 3:

Here is a version for jquery, which also handles some new buttons google maps has introduced, and divs that can be tabbed to.

$('#map a,#map button,#map div').each( function (){$(this).attr('tabindex','-1');$(this).attr('aria-hidden','true'); });

Solution 4:

I got this to work with jQuery

First I added an event listener to map's "idle" event after my coordinate data has been loaded

this.map.addListener('idle', $.proxy(this._removeTabindex, this));

then in _removeTabindex function I added tabindex="-1" and aria-hidden="true" to all elements

_removeTabindex: function () {
    $('.gm-map').find('*').each(function() {
        $(this).attr('tabindex','-1');
        $(this).attr('aria-hidden','true');
    })
}