As a web designer I am frequently required to embed a Google or possibly Bing map onto the contact page of a new website. Often times the client or the allotted area for the map can be fairly small making it hard to see the “Pop-up” window which contains the address information and such on the map. Frequently the window will get cut off on the top or it simply is aligned oddly for the size of the map.
The issue:
Notice how the window is cut off and you can’t really see much.
How it should look:
Now you can see the full Pop-up window, yet without having to change the allotted width and height of the map area.
The Solution:
HTML:
<div class="mapContainer">
<iframe width="400" height="550" src="”></div>
</div>
*Note that most of the map code is removed for ease of reading.
CSS:
.mapContainer
{
width:400px;
height: 300px;
overflow: hidden;
}
If you look at the code above you will see a few key elements to make this work.
First, you need to wrap your iFrame in a simple div with a class or id attached to it, in this case it’s just a class called “mapContainer”.
Secondly, in the css code you need to define your height and width, specifically the height. As you will notice I have set the css height to only 300 pixels (my allotted space on my site), but the iFrame height is 550 pixels. (more on this in a bit)
Thirdly, you will notice I have a css attribute: overflow: hidden; – this is important as it allows us to hide anything that may fall outside of our div container.
Now back to the height settings, if you look at the iFrame you will notice it is set to 550px and not the 300px that we have in our css. What we are doing is making the map “extra tall” which in return pull our location marker and pop-up down further inside of the div, thus lining it up the way we want need it to be while not extending outside of our div container since we have the overflow: hidden value set. (You need to fiddle with the height values until you get the desired vertical placement)
And that is all there is to it, pretty simple but very effective.
I have never actually tried it, but I would expect you can have the same results if you need to adjust the horizontal placement as well, just set your iFrame width larger than the css width.
You will only be able to pull the pop-up down and/or right with this technique.
Has anyone else had a similar issue? How did you solve it? Is there a better way? Let me know your thoughts.
