Archived topic
Embed Google map needs a title
3 replies · Started by Ron on July 19, 2018
Good Afternoon GP
I’m using a google map embed in a footer for our website, works fine.
But, I use google lighthouse to monitor website for google recommendations.
I get this google recommendation
Accessibility: <frame> or <iframe> elements do not have a title”
the offending code is for googles map embed code “ (Ironic)
This is the code I’ve used to try to remedy this issue or different versions to no avail
<head> <title>A embed Google map using iframe</title> </head>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5332.439251464501!2d- 122.1701542!3d48.0674035!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5485538368d42af1%3A0x2db5d76da17b5404!2sSonRise+Apartments!5 e0!3m2!1sen!2sus!4v1529822106275" width="250" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
I would appreciated input on how to properly code this Google map embed with a iframe title
Ron
Hi Ron,
you can add a title attribute to the iframe element e.g:
<iframe title="title" src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5332.439251464501!2d- 122.1701542!3d48.0674035!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5485538368d42af1%3A0x2db5d76da17b5404!2sSonRise+Apartments!5 e0!3m2!1sen!2sus!4v1529822106275″ width=”250″ height=”200″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
Thank You Dave code worked great!! On another topic are there any html online classes that you would recommend?
Thats good to hear.
Just starting out and want to the core stuff:
https://freecodecamp.org is a good learning resource. And its free :)
General guides:
https://www.w3schools.com
https://css-tricks.com
Intermediate to advanced resources:
https://developer.mozilla.org/en-US/
Good reading:
https://www.smashingmagazine.com
