Add a Driving Directions Form to a Website

This code adds a small field to enter an address, plus a “Get Directions” button. The results are shown as Google Maps directions.

Be sure to edit your destination address in the code.

<form action="" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="101 Main St, Tampa, FL 33615" />
   <input type="submit" value="Get directions" />

Remove Location Bubble from Embedded Google Maps

When embedding a Google Map into a website, you get that annoying location bubble. Sometimes you want it there. Sometimes you don’t. To get rid of it, add the following to the end of the src url.

Just after:




CSS to Force a Scrollbar to Appear in IE8 and FF

Websites sometimes appear “shift” side-to-side a bit when you go from one page to another within the same website. This is usually caused by going from a page with a scrollbar to a page without a scrollbar, and vice-versa. The scrollbar appearing and disappearing causes the page width to be slightly different, thus the shifting appearance. This is usually seen in FireFox and IE8 browsers, due to how they render pages.

So as a web developer, how do you fix this? Simple. Add this single line to your css:

html { overflow-y :scroll }

This forces a non-active scrollbar to appear on pages that would otherwise not need a scrollbar.