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.
<script>
/*
* 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);
</script>
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
