Hi,
How would I add a responsive full screen google map?
Thanks,
Aaron
Full screen Google Map
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
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
Re: Full screen Google Map
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)?
Re: Full screen Google Map
Sorry, I should of said, full width.
Aaron
Aaron
Re: Full screen Google Map
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.
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.
Re: Full screen Google Map
or you can look at my extension here that is responsive
https://shop.grahamscomputers.net/websh ... ps-12.html
Graham
https://shop.grahamscomputers.net/websh ... ps-12.html
Graham