But should they be? This post is in not an answer, it is an introduction to discussion—and hopefully reflection.

So, which comment fields do we see in comment forms today?

Name

Name is pretty obvious. We need a name to know who writes the comment.

E-mail

Is the e-mail field necessary? Well, many websites uses an e-mail field in the fight against spam. But is that really necessary? Most spam bots can figure out how to put an ‘@’ between two words in order to cheat. Still, it’s better to have a little security than none at all.

Website

In this field, the user can put the URL to their website—if they have one. Most people that visit my website don’t have a website—at least they don’t write the URL in the website field.

Comment

This field is of course obvious, as it is the comment itself.

So, these four fields are the basics of a standard comment form. But what could we else be needing? Let’s look at where we might be able to improve.

Headlines

Why not give your users the possibility to give their comment a headline? It, of course, depends on each website, but headlines can be a good way to summarize a comment, and help people find the comment they are looking for a lot faster.

Age

Depending on your site’s topic, age might be a good field to add. It might even replace the name field in case the site is based on the anonymity of the user.

Gender

Like with age, a site allowing you to be anonymous would be a good place to use a gender field in your comment section.

Social media

Social media is here to stay. Whether it’s Facebook, Twitter, Flickr, etc., social media connects people. And even though the primary function of a comment section on a website is not to connect people, I don’t see why we can’t add to social media by letting our users link to their social media accounts in a comment form.

Let your users write the URL to their Facebook account, their Flickr user name, their Last.fm account, whatever! Still, you shouldn’t let it get too clumsy by filling the comments up with way too much information. If there’s no need to let them write it, don’t give them the option.

If those reading the comment find one comment particularily interesting, it is very easy to get in touch with the person who wrote it, as the e-mail address isn’t public.

Category

You might want your users to give different categories of comments, such as review, support, criticism, etc. The comments can be styled in different colors or within tabs. A great example of this is The Idea Shower, as seen in the picture below.

Final Thoughts

Remember, before everything, that you shouldn’t add a field if there is no use for them. The most important part of the comment is the comment itself—don’t confuse your visitors with too much information; you still want your comments to be readable.

This was my thoughts about adding new fields to a comment form. What do you think? Do you think it should stay the way it is or should we take advantage of being able to make every comment form different? Please write you comment in the standard comment form below…

Google Maps are more fun when you can get directions. And now you can! The recent release of the Google Maps API adds two new classes in order to enable directions. In this article I will show you how to add an input field in an infobox and use that to render a route.

But before that, here’s how it looks when it is done:

Because of the size at the page here the infobox gets a scroll bar, but just ensure to make your map large enough, then it will not happen.

Overview

• What’s New?
• Corrections
• The Directions
• Calculating the Route
• Conclusion

What’s New?

Since my last article a couple of new features have been added to the API, as you can also read about in the changelog. The most important, in my opinion, is of course the support of directions, and that’s the only function I will discuss here. Worthy to note, though — you do not have to use an API code anymore.

The support for directions is possible via two new classes, DirectionsRenderer and DirectionsService. DirectionsRenderer… Well… Renders the directions, and DirectionsService computes the actual directions. But the big question is — how do we use them?

Corrections

Before we rush into the new code, we should make some corrections in our excisting code. If you haven’t read my article Adding Custom Google Maps to Your Website, do yourself a favor and do so before continuing on this one.

[ad#ad]

Next, look in your code where you define your markers and ensure that your values follow these rules:

var companyImage = new google.maps.MarkerImage(’images/logo.png’, new google.maps.Size(100,50), // (width, height) 
new google.maps.Point(0,0), 
new google.maps.Point(50,50) // (width/2, height)
); var companyShadow = new google.maps.MarkerImage(’images/logo_shadow.png’, 
new google.maps.Size(130,50), // (width, height)
 new google.maps.Point(0,0),
 new google.maps.Point(65,50) // (width/2, height)
);

Dividing the image’s width by 2 ensures that it’s the bottom center point of the image that’ll be used for the marker. Thanks to JM for this solution.

The Directions

So, first we have to call the DirectionsService constructor. Before your initialize(), create a new variable:

var directionsService = new google.maps.DirectionsService();

Next, we have to create the renderer. Right before the variable you just created, define a new variable directionDisplay. This variable is going to contain the renderer.

var directionDisplay;

In your initialize() function, right after the latLng variable, set the directionDisplay variable to this:

directionsDisplay = new google.maps.DirectionsRenderer();

Further down in your code, find the map variable (right after the settings variable. Write this:

directionsDisplay.setMap(map);

This renders the marker on the specified map, which in this case is map. Next, let’s define what we want to write in our infobox by expanding the contentString variable:

	var contentString = '
<div id="content">'+
	'
<div id="siteNotice">'+
	'</div>
'+
	'
<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>
'+
	'
<div id="bodyContent">'+
	'
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
'+
	'
 
Find your way here from:
 
'+
	'
<form action="index.html">'+
	'
<input id="start" type="text" value="prinsensgade 5, 9000" />'+
	'
<input type="submit" value="Find directions" /></form>
 
'+
	'</div>
'+
	'</div>
';

Let’s look a bit into the form used to ask the user for an address:

	'
<form action="index.html">'+
	'
<input id="start" type="text" value="prinsensgade 5, 9000" />'+
	'
<input type="submit" value="Find directions" /></form>
 
'+

First, we write “index.html” in our action attribute. This path should be to the file where your map is placed. In onsubmit we call the function calcRoute() (which we will define later), and next we write return false to prevent the site from reloading when the user submits the form. The next two lines should be pretty self-explainable. If you want the user to be able to enter both addresses, you can just add an extra input field called end. The value of the start field can be empty or you can write a pre-defined address.

Calculating the Route

At the very end of the initialize() function, write the following:

In the form we called the function calcRoute(). That’s the one we are defining here. The first thing to do is define the two variables start and end. If you inserted an extra input field before write document.getElementById("end").value; in end instead of the coordinates.

Next, define the variable request. The attributes of this one are fairly logical, but let’s explain them just in case. We define the origin of the route to our variable start, and the destination to end. Also, we define a travelmode —. This can be either DRIVING or WALKING.

Lastly, insert this code:

directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setDirections(response);
	}
});

This issues the actual search request, and completes the initialize() function.

Conclusion

With very little effort you can show your visitor how to get to your address directly from your website, instead of sending them to Google Maps or some other place. I hope you enjoyed the tutorial — please let me know if you have questions or suggestions. You are of course free to download the source files.

While you are here, why don’t you follow me on Twitter or subscribe to the RSS feed?

Before we start, check out what we are going to create:

Now, here is an overview:

Overview

• Google Maps API
• Getting the Coordinates
• Adding the Map to Your Website
• Adding Markers
• Customizing the Markers
• Adding Infoboxes
• Download

Google Maps API

The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying—a little CSS. Version 3 of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at Google Labs, and while you are there, be sure to get an API key.

Getting the Coordinates

As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

When you enter this in your address bar, you will see this:

The coordinates of Apple's head quarter in Cupertino

The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.

Adding the Map to Your Website

There’s no need to hesitate – let’s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between <head> and </head>:

1
2

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

After the URL, you will notice sensor=false. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.

Just below what we have just inserted, write the following:

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(57.0442, 9.9116);
		var settings = {
			zoom: 15,
			center: latlng,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Let’s split this up to ensure that we understand it fully. In line 2 we create the function initialize(). Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, latlng. latlng stands for latitudes and longitudes. The variable contains the coordinates we’re going to use as the center of our map.
After that, we create the variable settings. You have a lot of options here.

zoom specifies—you guessed it—how far the map will be zoomed in. Play around with the number to get it to fit your location.

center specifies our center. By writing latlng, we refer to the variable we created earlier, and the coordinate inside that will be used.

The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.

mapTypeId: google.maps.MapTypeId.ROADMAP defines that our map should be of the type ROADMAP – you can change this to either SATELLITE, HYBRID or TERRAIN.

Below the previous code, write this:

1

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

This code creates the variable map, and defines that the map should use the settings we just created.

Write

1
2

}
</script>

to end the function, and move to <body>, and write this:

1
2
3

<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:500px"></div>
</body>

By doing this we are telling our site to execute the initialize() function when the site is loaded, and insert a <div> with the size we want our map to be.

Try to view your site now. Cool, isn’t it?

Adding Markers

Now we have to add some markers. Let’s start by creating a standard marker—we’ll customize it in a moment.

Right below

1

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

insert the following code:

1
2
3
4
5
6

  var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title"
  });

Try to update your page, and watch the magic. So, what have we done?

First, we create the variable companyPos, where we specify the position of the marker. Next, we create the marker itself using the variable companyMarker. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won’t go into more depth with them.

Customizing the Markers

Create your logo

Next, create a shadow for your image:

The logo shadow

To add these images as a marker instead of the standard marker, change the marker code to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var companyLogo = new google.maps.MarkerImage('images/logo.png',
	new google.maps.Size(100,50),
	new google.maps.Point(0,0),
	new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
	new google.maps.Size(130,50),
	new google.maps.Point(0,0),
	new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyLogo,
	shadow: companyShadow,
	title:"Company Title"
});

What we have done here is also really simple. The variable companyImage points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable companyShadow. In our companyMarker variable we add icon and shadow, and that is basically it.

Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).

If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:

Adding zIndex allows you to choose which marker should be on top

1
2
3
4
5
6
7
8

var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyImage,
	shadow: companyShadow,
	title:"Høgenhaug",
	zIndex: 4
});

Adding Infoboxes

To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it’s peace of cake.

Clicking your company logo will bring up an infobox

Paste this code right after you define the map variable:

1
2
3
4
5
6
7
8
9
10
11
12

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
 
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last } in the initialize() function:

1
2
3

google.maps.event.addListener(companyMarker, 'click', function() {
  infowindow.open(map,companyMarker);
});

To make the infobox just a little more pretty, add some styles in your stylesheet file:

1
2
3
4

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size:10pt;
}

And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.

Download

If you’d like to download the sample files, you can get ‘em right here. Be sure to leave a comment!

Take for example Elliot Jay Stocks’ new website, elliotjaystocks.com. It is in it self a very beautiful website, but if you open it in e.g. Safari 4, it’s even more beautiful. When you hover your mouse over the images, the border will slowly fade into a lighter color. In non-WebKit browsers, it’ll just be a very sudden transition. This done solely by CSS.

Elliot Jay Stocks' new website

Another example is Atebits’ website. Atebits is the company behind the Twitter app Tweetie. Let’s have a look at their front page:

Atebits' website

That’s just beautiful, huh? Well, let’s dive into how we easily can add similar function to our own site.

The first property we have to learn is -webkit-transition. The -webkit-transition property is a shortcode for the three properties -webkit-transition-property, -webkit-transition-duration and -webkit-transition-timing-function.

We’ll probably learn this the best by having a look at an example, so here goes: We want to create a div that, when hovered, fades into another color. Here’s the code:

div {
  -webkit-transition: background-color, color 0.4s linear;
  background-color: #777777;
}
 
div:hover {
  background-color:#999999;
}

And here’s the example:

This wasn’t so hard, was it? Now let’s move on to using the -webkit-transform property. It allows you to scale, rotate, translate, and skew the object. It even allows you to use matrices for advanced transformations. Let’s try to rotate and skew the div from before:

div {
  -webkit-transition: all 0.4s linear;
  background-color: #777777;
}
 
div:hover {
  -webkit-transform: scale(1.3) skew(3deg);
  background-color:#999999;
}

This is just a little glimpse into what you can do with WebKit. Hopefully, you’ll find it useful.

i55iqj8amt

Nick La

Nick is the owner of Web Designer Wall, and runs N.Design Studio and Best Web Gallery. He has been around for many years, and has apart from a lot of great articles on Web Designer Wall also gotten tutorials posted in magazines.

• Interview with Nick at Web Designer’s Interviews

Collis Ta’eed

Collis is the CEO of the Envato network (if you haven’t heard of that, something’s gone wrong). The network contains Psdtuts+, Nettuts+, and other sites you should have subscribed to in your feed reader already. Collis is a great example of what hard work and making the right decisions can do for your business. As an example, Psdtuts+ has over 50.000 subscribers.

• Interview with Collis at Fuel Your Creativity
• Interview with Collis at Retire@21
• Interview with Collis at WalkMyBusiness
• Follow Collis at Twitter
• The Netsetter

Jacob Cass

Jacob is an amazing designer, running the blog Just Creative Design. He writes some very inspirational blog posts, and also is a very talented designer. One of his very interesting projects is the Graphic Design Group Writing Project, which you should definitely check out.

• Interview with Jacob at Abduzeedo
• Interview with Jacob at Inspiredology
• Interview with Jacob at My Ink Blog
• Interview with Jacob at Colorburned
• Follow Jacob at Twitter

Chris Spooner

Chris is an extremely talented designer with some very thorough tutorials. His blog is very exciting to read as his tutorials are very different from each other. Also, you should check out his personal website, which is a “self-updating social homepage”, as he puts it – a great idea for an online business card. You should also pay a visit to his portfolio site.

• Interview with Chris at Vandelay Design
• Interview with Chris at Inspiredology
• Interview with Chris at Just Creative Design
• Follow Chris at Twitter

Chris Coyier

Chris is the founder of CSS-Tricks, a blog that touches many more subjects than just CSS tricks… Chris makes some amazing screencasts, that you should definitely consider subscribing to. Are My Sites Up? is another great project of Chris’. The concept is very simple – add your site, and receive a notification whenever your site (or your client’s) is down. Also, Chris is behind Script & Style, a link sharing service for design-related articles and ressources.

• Interview with Chris at Nettuts+
• Interview with Chris at DesignM.ag
• Interview with Chris at Snap2Objects
• Follow Chris at Twitter

Who inspires you the most and why? Please share in the comments.

Thanks to Adrian Roselli for making the job easy!

Get the PDF (124 KB)