Page 1 of 1

Show a Google Maps location on my Website.

Posted: Mon Jun 23, 2025 8:11 am
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>

Re: Show a Google Maps location on my Website.

Posted: Mon Jun 23, 2025 9:02 am
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".

Re: Show a Google Maps location on my Website.

Posted: Mon Jun 23, 2025 9:20 pm
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

Re: Show a Google Maps location on my Website.

Posted: Wed Jun 25, 2025 9:15 am
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

Re: Show a Google Maps location on my Website.

Posted: Wed Jun 25, 2025 12:01 pm
by crispy68
Why are you using a text box? Code like this should be put into a html box.