javascript - Google Maps JS iFrame Title? - Stack Overflow

admin管理员组

文章数量:1325147

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.

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.

• javascript
• html
• google-maps

Share Improve this question Follow asked Feb 27, 2018 at 15:24 DrollDreadDrollDread 37177 silver badges2323 bronze badges 5

• is this the API v3 you are using? If so, the doc tells nothing about adding a title. But that should be easy to add your own title, like a div, positioned either outside the frame, or in position absolute on top of it. – Kaddath Commented Feb 27, 2018 at 15:48
• 1 This is more for accessibility and validator issues rather than for visual purposes. – DrollDread Commented Feb 27, 2018 at 16:04
• 1 what do you mean by accessibility and validator issues? for the first, your div already has an id to access it, and for the second, title is a universal attribute that is not mandatory for a div or iframe. By the way, you are talking about iframes, but the map is actually not rendered in an iframe, see fiddle here: inside the fiddle iframe, the map is rendered in divs, there is an empty iframe inside, but it's probably here for munication purposes with google, it has nothing in it. – Kaddath Commented Feb 27, 2018 at 16:20
• 1 I see, the information I was provided for the issue was 'Google Maps iframe requires title attribute (title = "")' so I believe this was picked up in w3c validator or sitemorse – DrollDread Commented Feb 28, 2018 at 15:54
• While the Google Maps doesn't load up as in iframe in modern browsers, it does load as in iframe as a fallback for some older browsers, including some of the ones used to test accessibility. I would like to know if someone finds out how to do this - unfortunately we've had cases where the government (enforcing the law) does not care about "false positives" but only see the tool which shows that error. – Mauricio Commented Jun 11, 2018 at 17:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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./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.)

本文标签： javascriptGoogle Maps JS iFrame TitleStack Overflow