How to add full width google map in Unbounce

mm
How to add full width google map in Unbounce
5 (100%) 1 vote

There are a lot of people are use Google Maps almost every day. In addition, when people are on their way, With the Google Maps, getting access to the service from the smartphone or tablet is no problem. This way, people will find your company or business location easily.

Website page contains a sample map embedded using the default embed code provided by Google Maps. That embedded map is non-responsive. It means is if you open that web page on a device other than your desktop computer or mobile, sometimes Google Map won’t fit the screen and you’ll have to scroll the page horizontally to see the complete map.  Here’s another web page that contains the same Google Map but now the map has been embedded responsively. Thus, if you resize the browser or view the page on a small device, the embedded map would adjust its size automatically based on your screen size. On Unbounce platform big issues with the full width of google map, so let’s see how to make full-width google map in Unbounce!..

step 1:  Open your unbounce editor

First of all, open your unbounce editor

Step 2: Take section tool

Now take section from the tool and copy the section id

Notes: Here you must select stretch background to page edges

Step 3: Copy the bellow script

Now copy the bellow script and the past on javascript section.

Step 4: Replace the id

Make sure as per the above class, you can see the id (#lp-pom-block-315), replaces your section id which you can find in 2nd step screenshots. Now save your web page and publish it.

Step 5: Testing

you can check live demo hear  Live Preview

Thanks for checking out our tutorial, go ahead and share your experiences with the world using the comments below!

How to add full width google map in Unbounce
5 (100%) 1 vote

Leave a Comment

Your email address will not be published. Required fields are marked *