Google Maps JS iFrame Title?

Question

Is it possible to add a title attribute to the google maps iframe if it is being rendered by javascript?

Here is an example of how this is being rendered in the html page.

<div id="googleMap" style="width:100%;height:400px;" title="test"></div>

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

I understand you can add a title if referencing an iframe directly e.g.

<iframe title="test"/>

but wasn't sure if it can be altered when producing the map this way.

Answer 1

Google Maps API has a way of adding event listeners to it's maps. Since you will only need to use it once: https://developers.google.com/maps/documentation/javascript/reference/3/event#event.addListenerOnce

I was able to pass the Lighthouse A11y audit after adding the following:

google.maps.event.addListenerOnce(map, 'idle', () => {
  document.getElementsByTagName('iframe')[0].title = "Google Maps";
})

(Add the snippet below the map variable.)