Google Maps with markers- Works with Freeway Pro

I Need Help
1

I have a website that works being built with Freeway Pro. I can’t get it working in Blocs.
I copied and pasted the code, but no luck.
here it is minus my Google key

Thanks is advance. (Pasting in a HTML widget Blocs 3.0)

html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }
2

Hi
Search for the location you need in Google maps, then click on SHARE, then click EMBED MAP and copy the html code ino a Blocs HTML brick. I’m not a coder but if you want it responsive I found this code online and you paste it BEFORE the Google embed code.

.google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

It works fine.

David

4

hey @JohnBush This is my code:

<style>
    .google-maps {
        position: relative;
        #padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
        height: 500px !important;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        width: 100% !important;
        height: 100% !important;
    }

<iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5434.0657433622755!2d8.348732!3d47.078819!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478ffc1a54f60c91%3A0x2a717dc2b3545c35!2sHolenweg+2%2C+6030+Ebikon%2C+Switzerland!5e0!3m2!1sen!2sus!4v1510527725184” <=“” iframe=“” class=“”>

56
562766×1142 609 KB

1 Like
5

Thanks @RME that’s what I was trying to paste!!

1 Like