Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ html error: embedding a google map

Posted by: jokerrules Sep 19 2017, 03:02 AM

Greetings, web designers!

I'm getting an html error when I copy and paste the html code for a Google Map embed. Here is what it says:

"The 'frameborder' attribute on the 'iframe' element is obsolete. Use CSS instead."

And here's the code (copied directly from Google Maps):

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12608.912218734722!2d-122.42538575928587!3d37.80812692913063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580fa79aee3b9%3A0xd0ce5b8bf914906a!2sFisherman's+Wharf%2C+San+Francisco%2C+CA%2C+USA!5e0!3m2!1sen!2sde!4v1505807894509" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Where am I going wrong? (Sorry if this is silly question... I'm new to this world.)

Thanks in advance for your help!

Posted by: Christian J Sep 19 2017, 05:24 AM

I assume you mean a validator error?

QUOTE

"The 'frameborder' attribute on the 'iframe' element is obsolete. "

This is the FRAMEBORDER attribute in your IFRAME code example (with its value set to zero):

CODE

frameborder="0"

They simply want you to remove that, because CSS is considered a better way to style iframe borders (it doesn't hurt anything by keeping it, though).

QUOTE

Use CSS instead

The code example already has that here:

CODE

style="border:0"

(though it's more practical to use stylesheets instead of inline styles in STYLE attributes).

Posted by: jokerrules Sep 20 2017, 02:09 AM

QUOTE(Christian J @ Sep 19 2017, 05:24 AM)

I assume you mean a validator error?

QUOTE

"The 'frameborder' attribute on the 'iframe' element is obsolete. "

This is the FRAMEBORDER attribute in your IFRAME code example (with its value set to zero):

CODE

frameborder="0"

They simply want you to remove that, because CSS is considered a better way to style iframe borders (it doesn't hurt anything by keeping it, though).

QUOTE

Use CSS instead

The code example already has that here:

CODE

style="border:0"

(though it's more practical to use stylesheets instead of inline styles in STYLE attributes).

Ah, so it's sort of giving redundant instructions then. I wonder why Google Maps does this? Is it to accommodate both systems, html and CSS?

Thanks for your help!

Posted by: jokerrules Sep 20 2017, 09:00 AM

Hmmm... seems I am hitting more walls here. Trying to embed an image... what am I doing wrong here?

<img src=" https://goo.gl/images/1rM6uV" style="width:128px;height:128px;">

Posted by: Christian J Sep 20 2017, 10:04 AM

QUOTE(jokerrules @ Sep 20 2017, 09:09 AM)

Ah, so it's sort of giving redundant instructions then. I wonder why Google Maps does this? Is it to accommodate both systems, html and CSS?

Yes, in the beginning HTML attributes where used for styling, but once CSS became common such presenational HTML attributes have been outdated. Maybe Google includes them as a fallback for ancient browsers, but that doesn't make sense since such browsers wouldn't support much else on the web either.

Posted by: Christian J Sep 20 2017, 10:12 AM

QUOTE(jokerrules @ Sep 20 2017, 04:00 PM)

Hmmm... seems I am hitting more walls here. Trying to embed an image... what am I doing wrong here?

Seems the URL redirects to an HTML page. Not sure why, maybe it's some kind of anti-hotlinking functionality.

The HTML looks correct, though you might add an ALT attribute and remove the space before the URL, but I don't think that should matter:

CODE

Posted by: Darin McGrew Sep 21 2017, 12:26 AM

I think the link to the image is
https://i.pinimg.com/564x/b6/9c/ea/b69cea6013f71e0b4211490ede60797c.jpg