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(document.getElementById('map'),
mapOptions);
//Remove o TAB do mapa
google.maps.event.addListener(map, 'tilesloaded', function() {
var mapContent = (document.getElementById("map"));
mapContent('a').attr('tabindex',-1);
});
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(document.getElementById('map'),
mapOptions);
//Remove o TAB do mapa
google.maps.event.addListener(map, 'tilesloaded', function() {
var mapContent = (document.getElementById("map"));
mapContent('a').attr('tabindex',-1);
});
Share
Improve this question
asked May 29, 2015 at 13:36
csfcsf
1,0113 gold badges14 silver badges28 bronze badges
4 Answers
Reset to default 6Building 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.
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'); });
[].slice.apply(document.querySelectorAll('#map a')).forEach(function(item) {
item.removeAttribute('tabindex');
});
Some like that
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');
})
}