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.

In the tech world today Google is a hot topic, it seems as if everything Google does creates a storm of positive reviews, articles, tweets and more. Google has become the ‘savior’ from all things Microsoft, people who hate Microsoft have moved over to Google because they think they are dealing with a company that is less “evil”.

Interestingly enough, this is the same type of situation that happened when Microsoft started to grow by leaps and bounds in the late 80’s and early 90’s. What’s the difference? At that time it was IBM who was the evil one, Microsoft came along and people flocked to their software and services because it was a new and provided cutting edge software and most of all it wasn’t evil like IBM.

What are some of the primary reasons people started to hate Microsoft?

• Market share – Microsoft controlled virtually every market that it entered
• Security – Microsoft got hurt big time by the massive number of virus attacks and malware infecting millions of peoples computers.
• Arrogance – With comments like Steve Ballmer’s about the iPhone having no chance at success.
• Control – Microsoft was able to grow and continues to grow rapidly by simply buying out the competition.

How many of the points above are we starting to see creep into Google’s basket. I’d say all of them and frankly Apple is going in the same direction as well.

Google dominates search it has continued to maintain a strong market share over every other competitor without a blink of an eye. Even big name companies like Microsoft have not been able to gain strong momentum even with their new Bing search engine. Search is the strongest service that Google provides and dominates in, but they are trying hard and really just starting to enter new markets with Android, Chrome OS, Chrome, etc. Each of which could begin to really prosper in an environment like we have today where people are ready for something new.

Security is certainly extremely important to almost all companies, including Google. With the latest comments by Google’s Eric Schmidt about privacy, makes many wonder how important security really is to Google. Android is just now starting to get some traction and Chrome OS and Chrome are in development, when these 3 systems are popular what kind of security issues are going to begin to arise? Microsoft learned the hard way and now have solid and intense security tests it runs, does Google spend the same amount of time testing security?

Arrogance is probably the one reason I don’t have a specific example for in regards to Google but I’m sure it’s there.

Control is very important to Google, almost all of Google’s primary services require that you have a Gmail account to access additional functionality. Every page you visit in Chrome gets reported back to Google (from my understanding anyway) which allows Google to better understand your habits whether this is good or bad is up to you. Google single handily has access basically ALL of the information on the internet and now even emails, phones, discussion, photos and now documents. With Chrome OS they want to control everything about you, on their servers on the cloud, scary.

As Google continues to create new services and offer them for free, it will begin to step on the toes of those who may be big supporters of Google which will lead to some un-happy people. Just look at what was released today, a new url-shortener by Google. I can’t imagine any of the other url shortening companies are very happy about this, how many people did Google just piss off by creating one little service. Or how about their new iPhone navigation system that places like TomTom have been trying to control or at least make money from, Google in one swoop crushed an entire industry. How many people did that piss off?

This very thing is what is eventually going to hurt Google, just as how it hurt Microsoft and before that IBM. The bigger you are the more markets you can enter, the more markets you control the more people you tick off, eventually this will catch up to them and their reputation will change for the worse. Despite their “do no evil” slogan, as a major company which influences many markets they are guaranteed to do some kind of evil whether they believe it is evil or not. Ask TomTom if Google did evil with their new navigation system, I’d bet they wouldn’t have to many positive things to say.