Your phone, your car, and your PC probably have a better idea of where they are than do their owners. While I'm not going to even get into the irony of misplacing a gps-enabled device, I would like to share a recent example of just how much you can achieve with today's mapping sites.

I was driving around Phoenix looking to purchase a truck and stopped at so many dealerships that the relative sameness of the inventory, arrangement of giant inflatables, and sincerity really made it hard to tell where I was. The next day, I had decided to take a test drive. I wanted to call ahead to make sure that the truck was still for sale and that it would be ready to test drive. Problem? I couldn't recall which of the myriad of dealers on the strip actually had the car for sale.

Enter geek mode. (aka everything can be solved by silicon)

I called up Google® Maps, selected a hybrid view (that's the type that combines satellite imagery with an overlay showing the street name), located the junction nearest the dealership, and found the building. I clicked to street view and up popped a picture of the building alongside the contact details.

So a happy accident for the dealership, but let's not leave YOUR business or event's location up to chance. In this two part entry, we’ll start out by adding a map to your Website Tonight project and look at ways in which you can make the maps you add even more valuable.

Let's set out to add a basic map.

For this example I'll use Google Maps (maps.google.com). While you don't need an account for the basic embedded maps, you're missing out on quite a bit if you choose not to.

Within Google Maps.

Bring up Google Maps and find your address and view you wish to include within Website Tonight. Next, click on “link to this page.” Now it’s unlikely the default size is going to be suited to your project, so click on “Customize and preview embedded map.” This will allow you to choose from several presets or you can select your own custom size. With those changes made, select the code and copy this into your clipboard. Don’t worry about getting the size exactly right. You can directly change the width and height within the first line of the code. Anything over 320px wide is likely to cause scrollbars to appear in our smallest content block.

Within Website Tonight

You will need a content block to place your map in and from there we are going to do something a little unexpected. Rather than paste the code directly into the HTML section, we’re going to place it within a script object container. Now this removes the real-time preview within the designer but makes the container far more responsive and easy to update edit on an ongoing basis.

You sacrifice a little immediate feedback when seeing how the map looks as you place it within the container. Otherwise the map will try to load every time you edit anything on the page.

Click on the content block and when it’s in edit mode, select the table & objects tab from menu on the left, mouse over insert object and then click on script. Paste over the existing code with the Google Maps code and then click OK. Click OK again to save the content block.

You should be looking at a script tag within the content block. To see how your map looks, go to page options and then preview page.

In the next entry I’ll be suggesting ways in which you can make the maps you add more valuable.