CODEWITHSUNDEEP
htmlcssgoogle-maps
danielaG
danielaG

Reputation: 159

Adaptable size for google maps embedded code - CSS/HTML

I'm a complete begginer in CSS and HTML and I'm building my first basic page for training.

What I want do do is making the embedded google map scale according to the size of the browser window. What are your suggestions? Is there a way to use the embedded code in a CSS class? How would you do it?

Example google maps code:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pt/maps?f=q&amp;source=s_q&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632&amp;output=embed"></iframe><br /><small><a href="http://maps.google.pt/maps?f=q&amp;source=embed&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632" style="color:#0000FF;text-align:left">Ver mapa maior</a></small>

Upvotes: 1

Views: 9775

Answers (2)

umbriel
umbriel

Reputation: 751

Check out these two links. The first one shows the code the second shows the result

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMapCode.htm

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMap.htm

Upvotes: 0

Mano Marks
Mano Marks

Reputation: 8819

So one option is to simply change the width and height attributes to percents.

<iframe width="50%" height="50%"...

Another option would be to take those attributes out and create a CSS element selector in your stylesheet

iframe{width:50%;height:50%;}

If you add an class attribute say:

<iframe class="map"...

You can further specify your class:

iframe.map{width:50%;height:50%;}

Sitepoint has a good CSS reference: http://reference.sitepoint.com/css

Upvotes: 4

Related Questions