This is a simple solution to a rampant UI problem. When scrolling through a page, especially on a small screen, with an embedded map, it is so easy to get trapped scrolling through Vermont and The Pacific ocean rather than the material you were looking for underneath the map. With this simple fix, we will be able to give our users the experience they were looking for without sacrificing the usability of the embedded map.
What we are going to do is add a transparent div over the map with CSS and, with a few lines of jquery, remove the class when the div is clicked. Let’s begin.
1. Embed Map onto site
At https://www.google.com/maps, navigate to the place you want your map to show on your site. Now go to the menu tab in the top left corner and choose the Share or Embed Map option. From the pop-up window choose the Embed Map tab. In the top left corner of that window you can choose the size of map you would like to embed, including a custom pixle size.
Select and copy the code inside the content box beginning with <iframe>. Now paste the code in your html document inside a container.
2. Make a transparent div overlay
As shown above, underneath the map (the full iframe tag), make an empty div. Give it a class so that it is targetable in CSS. Here it has a class of ‘mapOverlay’.
In CSS, make the div as large as the as the map by positioning it absolute and giving it the properties: top:0; bottom:0; right:0; left 0;. Don’t forget to add position: relative; to the parent container.
Finally, add a z-index of 2 (or 999999) to your .mapOverlay.
3. remove the div when clicked
First, set up your html document so that jquery is imported. At the bottom of your html document, right before the closing body tag add a set of opening and closing <script> tags. The src attribute for the script tag should read: src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js”. This allows you to use the jquery library in your project.
Underneath, write another set of script tags and inside insert a ‘document ready’. Like this:
Now, using jquery notation, we will select the element that we are trying to target, in this case a div with the class of ‘.mapOverlay’ and instruct the browser that: on click remove this class from the element. This is what it looks like:
You did it! Try it out with a background colour on the .mapOverlay if you want to see how it works in the browser.
With this simple addition we can make our user’s experience so much less frustrating. Congratulations!