How to add google maps to your homepage…

Now I know it’s not rocket science, but if your in a rush and quickly need a map on your web site then the quickest and easiest way is to use google maps.

There are quite a few different ways of how to go about this and depending on what you want to achieve some may be more correct then others, but I’ll just show you the quickest one here. Ok, let’s go…

Step 1. Login
Go to google maps and sign in: http://maps.google.com/
You will need a google account to do this, but google accounts are very handy anyway, plus they are free and registration is rather quick and painless.

Step 2. Find your destination
Enter the search address and let google find it for you.

Step 3. Click “Save to My Maps” and create a new map.
On the map a pin will point to the address and in the speech bubble of the marker there is a link that allows you to “Save to My Maps”. After clicking that link choose “Create a new map” from the drop down box . Change the title to the a name of your choosing and add/change the description to whatever you want.
You can also change the type of marker used to highlight the position by clicking on the blue marker in the top right corner of the speech bubble.

By clicking on the marker in the map and dragging it to a new positoin you can also fine tune the location if it isn’t spot on. You don’t need to worry about the details too much since you can always come back and edit them later.

Step 4. Click “Save” and “Done”
Click “Save” and “Done” to save the new map permanently to the profile of “My Maps”

To edit things later on you can always return to the “My Maps” box and click on the link you just created. To edit the text inside the speech bubble click on the “Edit” button on the left. Click “Save” and “Done” on the left to make changes permanent.

Step 5. Get link for website and adjust style
After editing the entry click on the “Link to this page” link on the top right corner of the map. Copy the <iframe> link into a text editor and feel free to adapt anything you might need to suit your layout, e.g. you can replace

width="425" height="350" with

style="border:1px solid #0F3CFF;padding:2px;" width="640" height="480"

to add a blue border and make the map window a little bigger. Feel free to play around and try different things.

If all this code doesn’t mean anything to you, just copy it as is.

Step 6. Paste link into the webpage
Simply paste the copied code into the part of your webpage where you want the map to apear and then…

Step 07. Admire the results in your browser

ColorZilla

ColorZilla is one of the most useful little tools I came across in a long time. It saves me a lot of tedious work when quickly having to find a color I need in a layout. Adjusting layouts, widgets and graphics often requires you to quickly have the RGB color value of a certain element. So far I had two options, go look it up in the corporate design manual or take a screenshot and paste it into Photoshop to get at it with the colour picker.

ColorZilla, available at: http://www.iosart.com/firefox/colorzilla/ or at https://addons.mozilla.org/en-US/firefox/addon/271, saves you all that. After installing ColorZilla you have a handy little color picker right in the bottom left corner of your status bar, meaning you never have to jump between programms again to get at the right RGB color value. It also saves you the trouble of having to type out the colour code “by hand”, since a right click on the eye drop icon offers you the options to copy the most recent color pick in numerous formats. As the name suggests the extension is available for Firefox and the Mozilla suite.

The new version 2 of the extension even adds a little DOM color Analyzer, an online palette viewer that allows you to bookmark and share palettes and a a handy zoom function for hunting down those really small pixels. Of course it is also compatible with Firefox 3.

A must-have if you have anything to do with web design!