100% Width Google Map

google_map_100_ub.css

<style>
  .maps iframe{
    pointer-events: none;
}
</style>

google_map_100_ub.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
/*
Imports Jquery 1.4.2
*/

<script type="text/javascript">
/*
Incorporates code snippets from community.unbounce.com and Stack Overflow.
*/
  
/**
  * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
  * TS:0002-17-079
*/
  
  // Replace URL with your embed map URL 
  var mapUrl = "URL"
 
/*
  Appends the map into the page section.
  
  Replace #lp-pom-block-8 with the ID of the page section where you want a map

  Modify 'height' to match the height of your page section in pixels
*/ 
  $( "#lp-pom-block-8 .lp-pom-block-content" ).css('width','100%').append('<div class="embed-container maps"><iframe src="' + mapUrl + '" width="100%" height="400px" frameborder="0" style="border:0"></iframe></div>');

  
  // disables scroll wheel unless the map is clicked. No need to modify.  
  $(document).ready(function() {
    $('.maps').click(function () {
      $('.maps iframe').css("pointer-events", "auto");
    });
    $( ".maps" ).mouseleave(function() {
      $('.maps iframe').css("pointer-events", "none"); 
    });
  });
</script>