Embedding Google Maps

TODO: Embedding Google Maps is as simple as pasting the IFRAME for the map. However, be aware that when scrolling over the page, the IFRAME of the map will capture the mouse scroll event, preventing the page from scrolling.

To overcome this issue, you should use the Maps Javascript API instead. If you choose to use the IFRAME implementation, you can add the code below to overcome the mouser trap issue:

 

HTML

<section id="content">
	<div class="map" id="overlay">
        <iframe  id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3118.943810333741!2d-90.40780471547198!3d38.581141747979544!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8cc31754abc77%3A0xd633e3938b87c432!2s101+W+Argonne+Dr+%23205%2C+Kirkwood%2C+MO+63122!5e0!3m2!1sen!2sus!4v1458332252466" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
</section>

 

 

CSS

.scrolloff {
    pointer-events: none;
}

 

 

Javascript

$(document).ready(function () {

    $('#map').addClass('scrolloff');                // set the mouse events to none when doc is ready
    
    $('#overlay').on("mouseup",function(){          // lock it when mouse up
        $('#map').addClass('scrolloff'); 
        //somehow the mouseup event doesn't get call...
    });
    $('#overlay').on("mousedown",function(){        // when mouse down, set the mouse events free
        $('#map').removeClass('scrolloff');
    });

    $("#map").mouseleave(function () {              // becuase the mouse up doesn't work... 
        $('#map').addClass('scrolloff');            // set the pointer events to none when mouse leaves the map area
                                                    // or you can do it on some other event
    });
    
});