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.

When you have a new idea for a large website project or for large client websites it’s not unusual to feel a bit overwhelmed by the scope and pieces the project requires. It can be frustrating trying to work on a concept design or talk to a client about how the site will work, how each page is connected to another or what each feature will require to make it work. How do you deal with this?

Some people like to use Sitemaps to organize the flow of web pages, this works well but can be limited as it doesn’t show the aspects of each piece of those pages. For instance I may have a simple contact page with a form, at some point there needs to be a decision as to what fields are on that form, this is where sitemaps begin to fall apart. This is why I use Mindjet MindManager a great mind map creator.

“A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid in study, organization, problem solving, decision making, and writing.” – Wikipedia

For every major project I open up MindManager and start organizing my thoughts into a structured diagram. With a mind map you start with a single “node” of which all other sub-nodes are based around. Lets say we want to make a website which is about Automobiles. In this first single node you would type in Automobiles. With mind maps it allows you to start general and work your way out to very specific which helps prevent you from ever feeling overwhelmed. Start general and then narrow down.

Your first Node

Now lets start working on our second layer of nodes:

As you can see we have begun to break down different areas of our site into slightly more specific but yet still quite general. From this diagram we can see that our site will have different Manufacturers of automobiles, automobiles have different options available, the site will have a list of features the user will be able to use and our site will need some sort of navigation system. It’s important to note that I tend to keep Site related items on the left and “object” related items on the right (at least at the start).

Now lets dig into our 3rd layer:

Our third layer again continues the narrowing down of our thoughts into structured organized layout. Now we can see that there are many manufacturers of automobiles (Ford, GM, Toyota, etc). We may want to make a specific page on our site for each one of those, or at the very least we know what companies we need to research for inclusion on our site.

All vehicles come with different options, colors, year, class, etc. Each with a broad set of sub-sections which we will mention on our next image.

Some features or functionality our site will have are a contact form, the ability for users to link to a page on their favorite social networking site, and a way to compare two or more vehicles with each other.

Lastly our Navigation system breaks into our primary navigation (navigation that is always visible to our users) and Sub navigation (which in this case will be if a user is logged in).

Again we have broken each level down into more and more specific information. We could continue to break down each node we could add additional nodes wherever we need to, if we forgot an important section we can just add it in where it’s needed. The software is very flexible and allows you to embed links, images and other items, plus it allows you to create boundaries (borders) around certain groups of nodes to help make them standout or even add “note bubbles” to a specific node to add a brief description on something if it’s not clear.

Feel free to experiment on how you lay things out, it’s very flexible and allows you to sub-divide and structure your layout basically anyway way you wish. So if you are feeling overwhelmed by a large project, just sit down and create a mind map to help organize your thoughts, it will do wonders for your ease of mind.