Remove the tabindex the google maps in my page

Question

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 goog         


        

Answer 1

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');
    })
}

Answer 2

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

Some like that

Answer 3

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.