Full screen Google Map

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Azz25
 
 
Posts: 52
Joined: Sat Apr 24, 2010 2:13 pm

Full screen Google Map

Post by Azz25 »

Hi,

How would I add a responsive full screen google map?

Thanks,

Aaron
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Full screen Google Map

Post by crispy68 »

Can you clarify what you mean by full screen? do you mean one that fills the entire browser width or the entire browser window (width and height)?
Azz25
 
 
Posts: 52
Joined: Sat Apr 24, 2010 2:13 pm

Re: Full screen Google Map

Post by Azz25 »

Sorry, I should of said, full width.

Aaron
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Full screen Google Map

Post by crispy68 »

It's very simple:

1. Go to Google, type in the address and click on the map
2. On the left side click on Share. In the pop up box choose 'Embed a map'.
3. There are 3 set sizes or you can choose Custom size in the drop down. I typically choose custom and then set the height to what you want. Copy the html generated.
4. In WB, insert an html box and open it up. Paste the code into the box. In the Type dropdown, choose 'Do not use <div>'. In the code you pasted, look for the 'width' property. Replace the number you see with 100%.
5. Insert a layout grid. In the grid properties, make it 1 column with 0 gutter.
6. Now insert the html box into the grid.

Preview and your done.
GrahamW
 
 
Posts: 240
Joined: Sat Jul 08, 2017 5:02 am

Re: Full screen Google Map

Post by GrahamW »

or you can look at my extension here that is responsive

https://shop.grahamscomputers.net/websh ... ps-12.html

Graham
Post Reply