Show a Google Maps location on my Website.

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
gregbarnes
 
 
Posts: 56
Joined: Sun Oct 27, 2013 8:15 am
Location: Perth, Western Australia
Contact:

Show a Google Maps location on my Website.

Post by gregbarnes »

Hi all. I obtained some code from this site https://embed-googlemap.com/ so I could show a map on my site for the location of our club nights. I check "Make Map Responsive" and copied the code as below. It works great when I placed the code into the "Inside Tag" of a responsive text box. I have no control however, of maintaining the size and position of the map when it displays. I've vever used the html section before, so is the any tips for the best way to do this? TIA.
This is my current site https://shadowsclub.au/index.html and i'd like the map to be under the menu bar on the home page, between "FREE ENTRY - EVERYONE IS WELCOME and ALL FUNDS RAISED GO TO:"


Code copied from https://embed-googlemap.com/

<div class="mapouter"><div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600& ... n&amp;q=27 manning road, como&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://embed-googlemap.com/my-location/">my location</a></div><style>.mapouter{position:relative;text-align:right;width:100%;height:400px;}.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:400px;}.gmap_iframe {height:400px!important;}</style></div>
Cheers for now,
Greg
User avatar
Pablo
 
Posts: 23602
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Show a Google Maps location on my Website.

Post by Pablo »

The code should not be placed in 'inside tag' this will make the HTML structure of the page invalid.
You will need to use an HTML object.
https://www.wysiwygwebbuilder.com/add_html.html

Note that I cannot give support on third party code, because it generally takes a lot of time for me too to figure out how it works
However, the code will be inserted "AS IS".
alan_sh
 
 
Posts: 1898
Joined: Tue Jan 01, 2019 5:50 pm

Re: Show a Google Maps location on my Website.

Post by alan_sh »

I place the iframe code generated by google maps inside an html box which I put into a cell of a layout grid. Works well. Have a look at penninescouts.org.uk for the result.

Alan
User avatar
GregInPerth
 
 
Posts: 1
Joined: Tue Jun 24, 2025 3:14 am

Re: Show a Google Maps location on my Website.

Post by GregInPerth »

Thanks gentlemen. I decided to place the map on its own page so it can be seen more easily. I just added a new layer and placed the code into the After Tag * of a Responsive Text box. Works a treat in all breakpoints. Here if you want to take a look. Feedback welcome. https://shadowsclub.au/map.html
User avatar
crispy68
 
 
Posts: 3090
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Show a Google Maps location on my Website.

Post by crispy68 »

Why are you using a text box? Code like this should be put into a html box.
Post Reply