How to add full width google map in Unbounce

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.


*  These are custom javascript for this template


/* #### INSTRUCTIONS : #####

|||||| -----> Paste your Google Map Embed Iframe Code with in Quotes ' ' and then change **width** and **height** values to "100%" ||||||||


var mapEmbedURL = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.3187820732514!2d-122.05119841100665!3d37.382292747021324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x79af12866bffc69d!2sEl+Mirador+Apartments!5e0!3m2!1sen!2sin!4v1467646844877" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>';

/*Script to Configure Map*/

$( "#lp-pom-block-315 .lp-pom-block-content" ).css('width','100%').append(mapEmbedURL);


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!

If you want customization in unbounce template or if you have already readymade design and you want to convert into unbounce platform check out the following services from ilmosys studio

Share the Post:

Featured WordPress Plugins


WordPress Block Patterns Library

Deals & Coupons

Unbounce Coupon

Save 20% off first 3 months

Cloudways Coupon

Save 20% off first 1 months