Embeding google map in Blocs 2.0

Tips and Tricks
1

Im sure for a lot of people here this is a simple thing but I am not figuring it out. Im just trying to learn this all on my own and have pretty much zero coding experience. Please help if you have any information. Thanks

2

Hi Jared

This is pretty simple. Just go to Google Maps and find the place you require, then click on share, then click embed. This will give you the html code to enter into an html brick in BLOCS. I think Google offers a choice of small, medium or lage, this is up to you. This code is not responsive, so copy and paste the code below BEFORE the Google embed code and it will become responsive.

.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; }

Hope this helps

David

3

Sorry Jared

I copied the code incorrectly. Use this:

.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; }

David

4

Sorry again Jarred

When I paste the code it looks ok but the Blog somehow misses lines out. Email me at david.smerdon@mac.com and I’ll send it to you by email.

David

5

Hi David,
you have to select all the code and hit the preformatted text button to get a clean code.
I have done it for you, this is a very useful trick.

 <style>
        .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;
        }

        </style>

        <div class="google-maps">
            <iframe THE CODE OF YOUR MAP FROM GOOGLE MAP>
    </iframe>
        </div>

Best
Alberto

3 Likes
6

I’m not sure if this is quite what you’re going for or not, but I put three icons with descriptions underneath in our footer: a telephone (Call Us), a google symbol (Find Us), and a Facebook symbol (Like Us). Then I linked the symbols and information underneath, so they can click on that google symbol, the words “Find Us,” or the address underneath, and any of those will pull up our business in google maps. (Obviously I also linked the phone to call us and the Facebook symbol to go to our Facebook page.)

7

This worked like a charm!

8

My two cents… don’t bother. It can cause problems and error windows to appear for your users. Security is a big concern for users. I get warning messages when I go to sites with google maps enabled due to my privacy settings in Firefox.

Put your address up… people will use a maps program to find you or to investigate your location.

The other issue… this service is free… that means that google makes changes with no concern for people who use maps embedded on their websites. They do not prewarn… One day it is just broken. Nothing is free… google gets paid by stealing your data when you use their free stuff. They are evil!

9

@BuffaloJohn There is actually a free alternative bric that works pretty well. OSM Map | Blocs Store

1 Like