Google maps

Hey Advantage09,
I found this code on stackoverflow here:

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

give this a try.

Best regards,
Mike

Hi,

This is possible but you may need to directly edit the enfold/config-templatebuilder/avia-shortcodes/google_maps/google_maps.php file and add the aria-hidden attribute around line 878.

$out =	"<div {$add_id} class='av_gmaps_sc_main_wrap av_gmaps_main_wrap {$add_css}'>";

Replace it with:

$out =	"<div aria-hidden='true' {$add_id} class='av_gmaps_sc_main_wrap av_gmaps_main_wrap {$add_css}'>";

Best regards,
Ismael

Hi,
Thank you for your patience, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function skip_google_map() { ?>
    <script>
  (function($) {	
  setTimeout(function(){
  $('.avia-google-maps').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })
  $('.avia-google-maps *').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })
  $('.avia-google-maps .gm-style *').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })	
  $('.avia-google-maps .gmnoprint').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })
      
  $('.av_gmaps_sc_main_wrap').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })
  $('.av_gmaps_sc_main_wrap *').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })
  $('.av_gmaps_sc_main_wrap .gm-style *').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })	
  $('.av_gmaps_sc_main_wrap .gmnoprint').each(function() {
          $(this).prop('tabIndex', -1);
          $(this).prop('aria-hidden','true');
      })	
  },3000);
  }(jQuery));
  </script>
    <?php
  }
  add_action('wp_footer', 'skip_google_map');

I tested this on a page with the google map element as a full width element at the top of the page and as another element in a column on Windows in Chrome, Firefox, & Edge and Mac in Safari, Chrome, Firefox
This worked on all except Windows Firefox which would tab to the map marker and then out to the next element on the page. The map marker has set the tabindex=”0″ and while the script changes this to tabindex=”-1″ in all other browsers including Firefox on Mac, it doesn’t in Windows, so I believe this is a Firefox bug, but it is small for this case as it is only one tab.
Since the Google Maps inner elements fully load slowly I had to add the delay (settimeout) to 3 seconds to change all of the inner elements, you can try adjusting to a lower number but in my tests 3 seconds seemed to work best.
If you have any trouble with this make sure you are not defuring your jQuery.
Try checking on my test page linked below, I added some css to highlight the elements focused to help spot the tabbed elements.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike