MapMaker

*Click a balloon for more information.

Last week I tried out Dipity, a timeline service I hadn't used before. This week I want to show you MapMaker, an awesome mapping application on the web. I have used this service many times and love it. It also happens to be free.

To get started, you need to register for a free account. This will allow you to save your map and add or subtract points later.

MapMaker has a helpful guide to get your started.

Here is how I created my map:
1) Login
2) Move the map and zoom in on Tucson
3) Single click on the area in the map that I want to be a point on the map
4) Name the point
5) Add html to style the information I want to appear (find more info about the html I used and html in general below)
6)Save marker
7) Repeat steps 3-6

Here is the html I used for the balloon that is "Photo 1" Look at the balloon and then compare to the code.
<b>50-mile ride:</b> Photo 1 <br /><img src="http://farm4.static.flickr.com/3325/3194673580_4f2983b607_o.jpg" width="225px" height="169px"> <br />This is an image of me riding on the <a href="http://tucsonbiketrails.wikispaces.com/Santa+Cruz+Trail" target="new">Santa Cruz bike path</a>.

Let me explain what each piece of html does here:
<b>50-mile ride:</b> Photo 1 <br />
In the above piece of code "50-mile ride" is between bold html tags. You can see the first tag which starts the bold and then the tag with the "/" ends the bold. That is why when you look at the "Photo 1" balloon, only "50-mile ride" is bold. The last html tag you see is a break tag or br tag, which essentially acts has a hard return. It forces the what ever comes next onto a new line.

<img src="http://farm4.static.flickr.com/3325/3194673580_4f2983b607_o.jpg" width="225px" height="169px"> <br />
In this piece of code, we are including the image. In this case it is a photo of me that I uploaded to Flickr. All you would do with this code is copy your image url and paste it in place of my photo. You also need to change the width and height numbers to represent your image. Flickr is great for this because they automatically have image sizing options. You want your images to be no bigger than 250 pixels in either direction and remember to keep it proportional.

This is an image of me riding on the <a href="http://tucsonbiketrails.wikispaces.com/Santa+Cruz+Trail" target="new">Santa Cruz bike path</a>.
The last piece of code is a little blurb about the photo with a link to more information about the Santa Cruz bike path. The a href part is the html tag. You can essentially copy my coding and insert your own URL. The "target ="new"" part of the code tells the browser to open the link in a new window. The words between the ">" and the "" will become the words that are the hyperlink.

To add the map to your Web site, you want to click the button that says "iframe" in MapMaker and copy and paste that html into your page. Here is what the map I created looked like
<iframe src="http://mapmaker.donkeymagic.co.uk/preview.php?map_id=9173" id="map" frameborder="0" height="500" width="600">&amp;amp;lt;br&amp;amp;gt;</iframe>

If you want to learn a little more about basic html and check out a cheat sheet, I recommend W3schools.

I used MapMaker in BorderBeat to highlight the restaurants we wrote about. It is just a little different way to present the data. Check it out here.