One thing to notice is that this book is about processes rather than how to actually design things. So if your looking for a design book this is not it. If on the other hand you’re looking for a book about the process of coming up with the design for web sites and web applications this is definitely a great book. It doesn’t go into great detail about each specific part of the process but provides a good overview and includes many great pointers to other resources.

The book is really hands on. It provides lots of descriptions of how to actually do things. Like signing a contract with the customer or choosing the right user research method.

The structure of the book

The first few chapters of the book is about the different roles of a UX designer in a project team. It’s also about how to create proposals and how to plan the project.

1. The Tao of UXD
2. The Project Ecosystem
3. Proposals for Consultants and Freelancers

Then there’s a few chapters about how to gather initial business requirements and how to do initial user research. There’s also a chapter about how Search Engine Optimization fits in the UX process.

4. Project Objectives and Approach
5. Business Requirements
6. User Research
7. Personas
8. User Experience Design and Search Engine Optimization

The last chapters of the book is about how to transition from defining to designing. They describe different techniques and approaches of coming up with the structure and design of the site. Examples of techniques are Site Maps, Task Flows, Wireframes and Prototypes. There’s also a chapter on how to perform usability tests with users and lastely there’s a chapter on how to transition from design to the actual development of the site.

9. Transition: From Defining to Designing
10. Site Maps and Task Flows
11. Wireframes and Annotations
12. Prototyping
13. Design Testing with Users
14. Transition: From Design to Development and Beyond

Bonus material

The book comes with a bonus, online-only chapter called A brief Guide to Meetings (pdf). I suggest that you download that chapter and read it to get a sense of the style of the book. There’s also an online chapter from the book available at the Peachpit website. The chapter is called Project Objectives and Approach.

Apart from those there’s additional documents and templates available at the download area of the book site.

Final thoughts

The book is really well edited. I haven’t been able to find a single typo. I found it very enjoyable to read and even if a lot of the information was familiar to me there were still grains of gold to be found. The best chapter for me was Chapter 9 – Transition: From Defining to Designing. It described different approaches on how to come to consensus about what the primary goals of the projects are that I really haven’t thought of before.

If you want an overview of the UX design process and an introduction to different UX techniques and approaches, read this book! I highly recommend it!

Book information

Title: A Project Guide to UX Design
Author: Carolyn Chandler and Russ Unger
Publisher: New Riders Press; 1 edition (March 23, 2009)
Pages: 288
ISBN: 0-321-60737-6
ISBN-13: 978-0-321-60737-9

Further resources

The book site

As always Steve’s writing style is relaxed but still to the point. He’s very humorous and there are a lot of things in the book that makes me smile. The book is nicely designed and is rich with illustrations that breaks up the text and make it more enjoyable to read. It’s not a long book. As he states himself, it’s short enough to read on a long flight. I think that’s a good thing.

I really enjoy Steve’s pragmatic approach to the subject. He manages to demystify the subject and make the case that anyone, well almost anyone, can perform usability tests and benefit greatly from it. Throughout the book he delivers maxims which contains the most important points. Two of my favorites are “A morning a month, that’s all we ask” and “Start earlier than you think makes sense”.

The book also contains lots of extra material, such as sample test scripts, a consent form and a video of him actually performing a usability test. You can watch the video yourself from the book’s companion site. I think that these add greatly to the value of the book since they provide you with concrete tools to get started.

Conclusion

If you’re interested in usability testing, already do them or plan to start doing them, this is definitely a book for you. It does not have all the answers but will provide you with all the information you need to get started. If you’ve conducted usability test before I’m sure that you will still find lots of useful information.

All in all this is a great book and I highly recommend it! If you haven’t read his first book, Don’t Make Me Think already, I highly recommend that you read it too.

Book information

Title: Rocket Surgery Made Easy
Author: Steve Krug
Publisher: New Riders Press; 1 edition (December 18, 2009)
Pages: 168
ISBN: 0-321-65729-2
ISBN-13: 978-0-321-65729-9

Further resources

The book site

Also download the MA Thesis and try out the interactive prototype at
www.martingimpl.com/stripes/.

Found through Lukas Mathis blog ignore the code where he shares his thought about the concept.

Last year over 30.000 people took the survey and A List Apart has made the results publicly available. Check it out! It’s a pretty interesting read.

I took the survey, and so should you! So head over there and answer the questions. It only takes about 5 minutes.

There are two reasons why I am doing this:

1. The main reason is that I think the book will be a better one from it.
2. The second reason is that I think it can act as a motivation booster for myself to actually finish the book.

About the book

In short the book is about how to use Google Maps API v3. It will teach the basics but also provide tips and tricks about more advanced stuff. It will be very hands on with lots of examples that can be used right away. You can read more about it in the article I’m writing a book about Google Maps.

Download the chapter

I am not going to release the chapters in chronological order so the first chapter to be released in public beta is not the first but rather one in the middle. It is about Markers and is called X Marks the Spot.

Download the chapter, read it, and tell me what you think. Either by posting a comment below or by contacting me directly through the contact page.

X_marks_the_spot-public_beta_1.pdf (791 Kb)

Stay posted

If you want to stay updated with the progress of the book, sign up below.

And just for the record, your email address is safe with me. I will use it for this purpose only. I hate spam as much as you do!

You should also follow me on twitter.

The methods I’m talking about are add(), find() and filter(). They are all used to extend or refine a selection of html objects that you’ve already got. Typically you’ve already got a selection using the jQuery method, or $(expression), but need to refine it further.

All three of these methods have, that they take a jQuery expression as an argument, in common. A jQuery expression typically looks like a regular CSS selector like for example “#content”. You can use any kind of CSS selector, including the ones found in CSS 3. On top of that you can also use jQuery specific selectors. It’s a really powerful way of finding the right elements in a HTML document. To read more about how a expression could be constructed, check out the section about selectors in the jQuery documentation.

We will take a closer look on how these methods really works in the following section.

Examples and explanations

Consider the following HTML.

<div id="div1">
  <p>Some text</p>
</div>
<div id="div2">
  <p>Some more text</p>
</div>

We’re going to use this HTML to do some selections from.

add()

As the name implies this method is used to add more elements to a collection that you’ve already got. So if you have a <div> with the id “div1″ in your selection and wants to add a <div> with the id “div2″ to it, add() is the method to use:

// This code will add div2 to the collection that already contains div1
$('#div1').add('#div2');

Read about add() in the jQuery documentation.

find()

Find() on the other hand is used to find descendant element from your selection. So instead of adding more elements to it it narrows it down to fewer elements. It searches what’s inside the parent element(s) in your selection. In the example below it will search for content inside of the selected <div> that matches the expression.

// Refine the selection to contain only the &lng;p< elements inside of #div1
$('#div1').find('p');

Read about find() in the jQuery documentation.

filter()

Filter() is quite similar to find() but instead of searching the descendant elements of the selection it “searches”, or rather filters, the elements that are in the selection.

// Reduces the selection to only contain the <div> with the id "div1"
$('div').filter('#div1');

Read about filter() in the jQuery documentation.

Demo page

I’ve constructed a simple demo page which demonstrates how these methods work. Please try it out.

Conclusion

All of these methods are very useful but it’s important to know which one to choose in a given situation. If you want to extend your selection to include more elements you should use add(). If you want to narrow down your selection you need too use either find() or filter().

Of course there are many other useful methods to traverse the DOM in jQuery. Which ones are your favorites?

The InfoWindow object

The InfoWindow object will open an InfoWindow somewhere on a map. It looks like a speech bubble and the tip of its stem typically points to a certain object on the map. Often it’s pointing at a marker, but it doesn’t have to be. It can point at any other object or any coordinate on the map.

The object resides in the google.map.InfoWindow namespace and takes an optional argument which is options. Options is an object literal in which you can define all the properties for the InfoWindow. This means that you can create an empty InfoWindow object for later use, but most of the time you’ll probably want to fill it with some sort of content right away. To fill it with content you’ll need to use the property content. It can be set either on creation of the object or afterwards using the setContent() method. It can be either a text string, a string containing HTML, or a reference to an existing HTML node.

Setting the scene

We will start with a map with one marker on it. If you don’t know how to create a map and add markers to it, I suggest that you read the previous articles in this series first.

For those of you that are already familiar with the concepts, here’s the code for creating a map and adding a marker to it:

// Creating an option object for the map
var options = {
	zoom: 7,
	center: new google.maps.LatLng(56.83, 15.16),
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating a marker
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(56.8848, 14.7730),
  map: map,
  title: 'My workplace'
});

This will result in a map that looks like this:

Adding an InfoWindow

Now that we have the scene set, lets add an InfoWindow to it. In this example we will instantly fill the InfoWindow with some content, in this case the classic text string “Hello world”:

// Creating an InfoWindow object
var infowindow = new google.maps.InfoWindow({
  content: 'Hello world'
});

Showing the InfoWindow

We have now created an InfoWindow object but not yet added it to the map. To make it appear we have to first open it and that’s done with its method open(). This method takes two arguments: the map object which it will be added to and optionally an anchor where it will point to. The anchor must be an object on the map that exposes a position property. As of now this will probably be a marker.

If you don’t pass on the second argument you must provide the InfoWindow object with a position. This is done with either the attribute position in options or via its setPosition() method. In this example however, we will pass our marker as the second argument so that the InfoWindow will point straight at it.

infowindow.open(map, marker);

Now the InfoWindow will be visible on the map and will look like this:

Note that the default behavior of the map is that it pans so that all of the InfoWindow is visible. This behavior can be overridden by setting the property disableAutoPan to false.

Adding a click event

As of now our InfoWindow is automatically opened when our map loads. Most of the time we want it to open when something is clicked and that’s exactly the functionality we’re going to add next. We’re going to add a click event to the marker so that when it’s being clicked the InfoWindow will open.

To add an event to the marker we will need to use the addListener() method found in google.maps.event. This method takes 3 arguments, the first one being the object it will be attached to, in this case the marker. The second argument defines what kind of event we want to add, in this case a click event. The third argument is a function which will be called when the event is being triggered. In this case we will use an anonymous function and we will move the code that opens the InfoWindow inside it.

Doing that the code will look like this:

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

Now, when we load our page the InfoWindow will not be visible until we click the marker. Then it will pop up.

Using multiple InfoWindows

You may have noticed that we create the InfoWindow outside the click event of the marker. Perhaps you’re thinking that we might as well could have put all of the code regarding the InfoWindow inside it. But there’s a good reason for not doing that. By creating the InfoWindow outside the event handler, we ensure that there only exists one InfoWindow at a time. If we had put the code for creating the InfoWindow inside the event handler we would have created a new InfoWindow each time the marker was clicked. Leaving us with several identical InfoWindows on top of each other.

Now there are ways to deal with this. We could for example check if the InfoWindow existed before creating it, but by creating it only once we completely avoid the problem all together.

If you’ve been programming in version 2 of the Google Maps API you’ll notice a significant difference here. In the old API we could only have one InfoWindow at a time, but now we can have several. Because of this we have to change how we think about them. There might be occasions when we want to display several of them at once, but often we will only want to display them one at a time.

More control over the Info Window

There are some other properties that you can add to options for added control of the InfoWindow. I’ve already mentioned content which defines what will be displayed inside of it and position which in lack of an anchor defines the position of the InfoWindow. But here’s all of the properties available for controlling the look and behavior of the InfoWindow:

content

This property defines the content of the InfoWindow. It can be either plain text, HTML or a reference to an existing HTML element. The InfoWindow will automatically adjust its size to fit the content.

disableAutoPan [boolean]

If set to true the map is no longer automatically panned to fit the InfoWindow. Default value is false.

maxWidth [number]

Sets the maximum width of the InfoWindow in pixels. It must be set before the InfoWindow is opened.

Another way of controlling the size of the InfoWindow is to add HTML with certain dimensions to it. This way you can control its size from you CSS.

pixelOffset [size]

If position is used to place the InfoWindow, pixelOffset defines how far away from this point the window should be positioned.

position [LatLng]

Defines the position the InfoWindow should be pointing at. If an anchor (the second argument of the open() method is set, it will override this property.

zIndex [number]

When displaying multiple InfoWindows at the same time, this property will determine the stack order of those.

Live demo

Check out the Live Demo showing the example used in this article.

Hopefully this article has provided you with a basic understanding of how to use InfoWindows in your maps but there are a lot more that can be done with them. They still lack a lot of the functionality found in the old API, like displaying a detail map inside it or having tabbed content. Some of these features will probably never find its way into the new API but fortunately it’s quite easy to build this functionality yourself. Keep your eyes open for my upcoming book where I will explain how to do some of this stuff.

Further reading

For more information about the InfoWindow object, check out the Official Google Maps Reference. You might also want to check out the section in the documentation about Overlays.

I’ve truly enjoyed Dan’s two former books Web Standards Solutions and Bulletproof Web Design. It was in fact from these books that I first learned the concepts of graceful degradation and progressive enhancement. I also learned clever CSS styling techniques that I’ve been using ever since.

In this new book Dan introduces the concept of Progressive Enrichment. It’s an extension of Progressive Enhancement and in a nutshell it’s about being OK with that web designs will look slightly different in different web browsers. Furthermore it’s about not letting the smallest common denominator deciding which techniques to use but rather reward the more forward-thinking browsers with a slightly more polished look than the other ones (read Internet Explorer). What this means is that it’s OK to start using some CSS 3 properties like border-radius and RGBA right now even though they’re not yet widely adopted.

If you’re still unsure about whether web sites have to look exactly the same in all browser or not, pay a visit at www.dowebsitesneedtolookexactlythesameineverybrowser.com.

The book also contains some ideas on how to reuse CSS between projects. Sort of like building you own lightweight CSS framework like Blueprint CSS and YAML. Dan explains the value of a global reset and some basic CSS rules that’s usable in every project.

It’s a true joy to read Dans texts. The writing style is relaxed but still to the point. The examples are thoroughly explained but doesn’t feel verbose. There’s also a laid back humor in the texts that make them even more enjoyable. As you probably noticed that I’m a big fan of Dan’s writing and the truth is that I wish that I could write like that. He’s just awesome.

Guest writer

This book features guest writer Ethan Marcotte who’s been writing a chapter about “The Fluid Grid”. Ethan is a renowned Web designer/developer from Airbag Industries. This chapter describes how to work with fluid grid-based designs. It contains both some history of grid-based design in print as well as techniques to incorporate them in a web design.

Included DVD

Included in the book I bought was a DVD featuring Dan explaining 10 design guidelines. The DVD was pretty OK but didn’t feature anything the book didn’t include. I guess that it’s primarily aimed at people that are not web designers and need to be oriented about some core concepts. Despite that, Dan playing ukulele in the background makes it well worth the time

Conclusion

If you’re interested in starting to use CSS 3 in your designs I highly recommend this book. Not so much for that it’s chock full of exciting CSS 3 properties because it’s not, but rather because it introduces ways to start using them right now without breaking the designs in older browsers. Anyway you’re in for a great read.

Further reading

Read more about the book at it’s acompaning web site handcraftedcss.com. You can also read more from Dan Cederholm at his blog Simplebits.com.

Book information

Title: Handcrafted CSS: More Bulletproof Web Design
Authors: Dan Cederholm and Ethan Marcotte
Publisher:New Riders Press; 1 Pap/DVD edition (August 20, 2009)
Pages: 288
ISBN: 0321658531
ISBN-13: 978-0321658531

If you aren’t already familiar with the map object, I recommend that you first read the two previous articles in this series.

The marker object

The marker object resides in the google.maps.Marker namespace and takes a single argument, options. Options is an object literal called Marker options that can have several properties of which two are required:

• map [Map]
  Map is a reference to the map where you want to add the marker.
• position [LatLng]
  This property indicates the position of the marker and is of type google.maps.LatLng

Lets start by creating a map and adding a regular marker with the standard look and behavior. If you’ve read the prior articles in this series you should already be familiar with the code that creates the map. Please note that I’ve used a somewhat more compact syntax here than in previous examples.

// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 7,
  center: new google.maps.LatLng(56.83, 15.16),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Creating a marker and positioning it on the map
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(56.8848, 14.7730),
  map: map
});

This code would result in a marker being added to the map, incidentally marking the place where I work. Note that the marker is immediately added to the map upon creation. So there’s no need, like in the old API, to explicitly add it to the map after it has been created.

Adding a tooltip

A common thing one might want to do is to add a tooltip to the marker. The tooltip is displayed when a user hovers with the mouse pointer over the marker. This is easily done by adding the property title to the marker options object.

Since this marker won’t be clickable I want to somehow indicate this. That is done by setting the property clickable to false. This results in that the mouse cursor won’t change on hover.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(56.8848, 14.7730),
  map: map,
  title: 'My workplace',
  clickable: false
});

Here’s how this will look like on the map.

Definition

• title [string]
  Sets the tooltip of the marker.
• clickable [boolean]
  Defines whether the marker is clickable/draggable or not. If set to false it will not display a special mouse cursor on hover. Default value is true.

Changing the default marker icon

Often we want to use a different marker than the default one. The API offers a simple way of doing this with the property icon. Icontakes either an URL pointing to an image or a MarkerIcon as its value. In this example I will use the more simpler, URL, and point it to this image.

This icon is taken from Nicolas Mollet’s map icon set at http://code.google.com/p/google-maps-icons/. There’s lots of similiar icons that you can use.

Here’s the code for creating a marker with a custom marker icon.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(56.8848, 14.7730),
  map: map,
  title: 'My workplace',
  clickable: false,
  icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
});

Now the map and the marker will look like this:

There are some other properties for more advanced control of the marker icon, such as shadow and shape. Shadow defines the shadow cast by the icon and shape defines the clickable/draggable area of the marker but I will not explain them further in this article.

Definition

• icon [string|MarkerImage]
  Defines the marker icon. It can either be an URL pointing to a suitable image or an object of type MarkerImage.
• shadow [string|MarkerImage]
  Sets the shadow of a marker icon. Takes either an URL or a MarkerImage as its value.
• shape [object]
  Defines the clickable/draggable area of a marker. It takes an object as its value. The object contains coordinates that define a polygon much the same way an imageMap is defined.
• flat [boolean]
  If set to true disables the shadow of the marker.

Note: By explicitly setting icon, the property shadow is reset. So even if we don’t provide shadow with a value, it will not inherit the shadow of the default marker. I could be argued that in this case the property flat should be set to true, but it’s not necessary for the marker to not have a shadow.

Other properties

Additionally there are a few other properties you can use to control the marker.

• cursor [string]
  This property changes the way the cursor look when the mouse pointer hovers over the marker.
• visible [boolean]
  This property determains if the marker should be visible or not. Set it to false to make the marker invisible. The default value is true.
• zIndex [number]
  Sets the stack order of markers. Could be handy if several markers sits on top of each other.

Live demo

Be sure to checkout the Live Demo to see the code shown in this article in action.

Other resources

For a full and most recent definition of the marker object check out the API reference. Also check out the section about overlays in the documentation.

Note: If you liked this article you might enjoy reading a beta chapter about how to use markers from my upcoming book on Google Maps API v3.

I haven’t written a book before so this is new territory for me. What I’ve noticed so far is that it progresses far slower than I predicted, but at least it progresses steadily even if slower than anticipated. I’ve taken a few weeks off of my regular work to devote to writing this book but this time won’t suffice, so there will probably be quite a few late nights and weekends of writing as well.

About the book

The book will mainly be about how to use the recently released Google Maps API V3. This new API introduces a whole lot of changes compared to the old one (V2) and this book is meant to explain the differences and to guide you into this new way of using it. Of course if you never used the API this book is for you as well. It will provide you with the skills and knowledge necessary to develop great maps.

The main target audience of the book are:

• Webdesigners that have some basic knowledge of HTML, CSS and JavaScript.
• Developers that quickly wants to transfer from the the old API to the new.
• Other people interested in incorporating Google Map in their web pages.

The book will deal with the basics of creating maps as well as some advanced topics such as how to deal with large amounts of markers. It will also promote best practices for both HTML, CSS and JavaScript. The book will be filled with code examples that will teach you how things work and that you can start using right away in your own web applications.

As of now I don’t know in which form this book will be published, but I’ll keep you informed as things progress.

If you have a request for something that you want me to include in the book, or any thoughts or questions about it, please contact me in the comments or through the Contact page.

Update: If you want a sneak peek of the book, I have published a beta chapter about Markers called X Marks the spot.

Stay posted

If you want to stay updated with the progress of the book, sign up below.

And just for the record, your email address is safe with me. I will use it for this purpose only. I hate spam as much as you do!

You should also follow me on twitter.

Future of Internet Search: Mobile version

Up till now this has merely been concept ideas for future technology, like the Futuristic Glass above, but it’s now becoming real! For the Google Android platform there’s already working prototypes, like for example this one. It’s called Layar and claims to be the first mobile Augmented Reality browser.

If you want to read more about this, Luke Wroblewski has written two articles on the subject, showing examples from both the iPhone and the Android platform, including YouTube videos of the applications in action.

• iPhone with a Compass = First Person UIs?
• First Person UIs on Android

The required properties

As we saw in the last article there are 3 required properties when creating a map. These are:

• center
  Takes a coordinate in the form of a google.maps.LatLng that defines the center of the map
• zoom
  Sets the initial zoom level of the map. It have to be an integer between 0 and 19 where 0 is fully zoomed out and 19 is fully zoomed in.
• mapTypeId
  Takes a constant of type google.maps.MapTypeId that defines what the initial map type would be

It’s pretty obvious how the two first properties work, but the last one, mapTypeId, requires a brief explanation. What it does is to tell the map what kind of map to display by providing it with a constant. There are a few map types to choose from and they are all contained in the namespace google.maps.MapTypeId. These are:

• ROADMAP
  A normal map
• SATELLITE
  Satellite images
• HYBRID
  Displays satellite images with roads and labels overlayed on it
• TERRAIN
  Displays a map with physical features such as terrain and vegetation

So for example, constructing a simple map with the maptype SATTELITE is done like this:

// Creating an object literal containing the properties we want to pass to the map
var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.SATTELITE
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);

That code would produce a map that looks something like this.

Controlling the UI

Note that some user controls are displayed on the map by default. In the old API you had to explicitly define which controls that would show but in version 3 it works the other way around, you have to explicitly define which controls not to show.

diableDefaultUI [boolean]

Default value is false. By setting this to true you will disable the default UI. That is: the default zoom control and the map type chooser will not be displayed, much as the default behavior in the old API. You can however also enable or disable these controls individually.

mapTypeControl [boolean]

With this property you control whether the mapTypeControl will be displayed or not. The mapTypeControl is the control positioned in the upper right corner of the map from which you can choose what map type to show. Set it to true to display it and to false to hide it. The default value is true.

mapTypeControlOption

With this property you control how the mapTypeControl will be displayed. It can have one of the following values which all resides in the google.maps.MapTypeControlStyle namespace.

• DEFAULT
  The DEFAULT value will vary the look of the mapTypeControl depending of the size of the window and possibly other factors.
• HORIZONTAL_BAR
  This option will display the standard bar.
  
• DROPDOWN_MENU
  This will display the control as a drop-down list. It can be handy if the map is small or you want it to take as little space as possible for some other reason. It currently looks a little weird since the arrow is positioned over the text, but I suspect that it’s a temporary glitch that will be fixed in future releases.
  

If for example you want this control to display like a drop-down menu you define it like this:

var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
};

Note that its parameter is an object literal with one property, style, which takes one of the constants in google.maps.MapTypeControlStyle as its value. This design might seem a little cumbersome at first but is actually pretty smart. It makes it easy to add more settings for the map type control in future releases of the API.

navigationControl [boolean]

This property displays or hides the navigation control. That is the control that typically resides in the upper left part of the map with which you can zoom and sometimes pan the map. Its appearance has changed a bit since the old version of the API but essentially works the same way. The major difference being that in the old API the large control had a “reset” button that reset the map to its initial state. This feature has been dropped in the new API for unknown reasons.

navigationControlOptions

The style of the navgationControl comes in 4 flavors that all resides in the google.maps.NavigationControlStyle namespace. These are:

• DEFAULT
  If set to this value, the control will vary according the map size and other factors. As of now that means that it will either display the small or the large control but that might change in future releases.
• SMALL
  This is the small control that only lets you to zoom the map.
  
• ANDROID
  This control looks like the SMALL one, but is supposed to be specifically tailored for the Android mobile platform.
• ZOOM_PAN
  This is the large control that lets you to both zoom and pan the map.
  

Here’s some example code on how to display the large control (zoom_pan).

var options = {
  zoom: 6,
  center: new google.maps.LatLng(57.8, 14.0),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  navigationControlOptions: {
    style: google.maps.NavigationControlStyle.ZOOM_PAN
  }
};

scaleControl [boolean]

This property determines whether the scale control will be displayed or not. Set it to true to display the control and false to hide it. This control is not displayed by default, so if you want it to show you have to explicitly set this property to true.

The scale control is typically positioned in the lower left corner of the map and are used to get a sense of the scale of the map. It looks like this:

scaleControlOptions

You can control how the scale control will be displayed with the help of this property. It currently only has one option which is STANDARD so there’s really not much you can do, but this might change in future releases.

keyboardShortcuts [boolean]

There are some keyboard shortcuts for controlling the map. These are the arrowkeys for panning and +/- for zooming.

Default value is true. If set to false it will disable the keyboard shortcuts.

Map div behavior

The Map div is the HTML element that contains the map. Typically it’s a <div> with id="map" or something similar. There are some properties that controls the behavior of this.

noClear [boolean]

The default setting of this is false, and what it does is to clear the content of the div that contains the map. If set to true it will not clear the initial content of it.

backgroundColor [string]

This property also affects the map div. It sets the color of the div’s background which shows when you pan the map and before the map tiles have been loaded.

noResize [boolean]

Default value is false. If set to true it prevents the map from doing automatic resize checking.

Cursor behavior

Finally there are a couple of properties to control how the cursor will look like. These are:

draggableCursor

Sets the name or URL of the cursor that is displayed on a draggable object.

draggingCursor

Sets the name or URL of the cursor that is displayed when an object is dragged.

Note: As of the time of writing these properties doesn’t seem to work properly. This will hopefully be fixed in a near future.

Live Demo

I’ve put together a Live Demo where you can try out some of the properties of the map and see how they affect it.

Try out the Live Demo

Conclusion

In this article we’ve examined the properties available when initializing a map in Google Maps API 3. These properties affect the look and behavior of the map. There are additional methods that can be used to alter these properties, but they will be covered in a future article. In the next article we will look at how to work with markers in the new API.

Some of the things he talks about is:

Scope management

In this part Nicolas explains the scope chain and shows some statistics on how long it takes to access data in different places in it.

Data Access Performance

It turns out you can gain quite some performance, especially in IE, by thinking about how you access data. By avoiding global variables and object properties/array items and instead use local variables as much as possible you can make your code run faster.

Loops

By doing some really easy modification to your loops you can get a 50% performance boost. What it boils down to is to :

• Decrease amount of work per iteration
• Decrease number of iterations

You should also avoid using For-in loops and for each loops and all the function based loops found in Javscript libraries like jQuery and YUI. These takes up to 8 times longer to run than regular for loops.

DOM

In this part Nicholas, amnong other things, talks about HTMLCollections and how slow they are. The reason being that they are dynamic by nature. For example just looping through an HTMLCollection takes up to 68 times longer (in IE) than it takes to loop through an array. Fortunately he also provides ways to remedy this.

He also describes how to avoid unnecesary reflow of the web page.

The video

This video gave me so much new information on how to optimize my Javascript code. This is definitely the best talk I ever seen on the subject. If you’re at all interested in Javascript you should definitely watch it.

Watch the video on YouTube.com

It’s interesting to note that the book was written through collaboration between 15 people on the forum and then released to the public, for free. This is how they describe them selfs:

Founded in 2006, Natural User Interface Group (~ NUI Group) is an interactive media community researching and creating open source machine sensing techniques to benefit artistic, commercial and educational applications. It’s the largest online (~5000+) open source community related to the open study of Natural User Interfaces.

Visit the forum and download the book at www.nuigroup.com/forums

Source: InUseful.se

Background information

First of all, this is an early release of the new API and it’s still in Labs. It doesn’t contain all the features of the old API and will probably never do so since the old API is bloated with lots of helper methods for doing all sorts of things like making AJAX calls and showing log windows. Nowadays we have libraries like jQuery and Prototype and tools such as Firebug to take care of these things. Therefor these features will not be included in the new API, since it’s main focus is to be streamlined in order to be as fast as possible. Other missing features such as polygons and polylines will however probably eventually be included.

Secondly, since it’s an early release it’s still undergoing major changes. Features will be added as we go along and some changes of how to do certain things might be introduced.

That said, I think that the new API is mature enough to use and certainly to experiment with. It also contains the most common features seen in implementations on Google Maps on the Web.

Enough with the background info already! Let’s take a look of what the new API looks like.

Inserting a reference to the API

The first thing you will notice is that the API key is no longer necessary. In the previous versions the API key was inserted as a querystring into the script reference but not so anymore. This means that you don’t have to apply for a new API key for every domain you want to have a map at. It also means that the URI to the API is a lot shorter.

So the only thing you have to tell, while referencing the API, is whether your device has a sensor or not. sensor=false if you don’t have a sensor and sensor=true if you do. With a sensor is meant some way to determine your present location, like if you have a GPS in your device. This information is attached as querystring at the end of the URI.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Creating a map

A new namespace

In previous versions of the API there were lots of global variables, distinguishing them selfs by having a capital G in the beginning, like GMap and GLatLng. In the new API the namespace google.maps is used. So what was formerly called GLatLng is now called google.maps.LatLng. Using namespaces is good coding praxis. One should avoid cluttering the global namespace as much as possible in order to avoid collisions with other code. Read more about why in Global variables in Javascript.

So in practical terms, here’s how to create a new coordinate object the old way and how to do it the new way. The LatLng() method takes two arguments, an x and an y coordinate.

// The old way
var latlng = new GLatLng(57.8, 14.0);
// The new way
var latlng = new google.maps.LatLng(57.8, 14.0);

Object literals

The new API makes heavy use of object literals to pass arguments to it’s methods. The old API used object literals as well, but in this version they’ve taken it a step further which I think is positive. I think this is a really beautiful way of coding. It’s easy to use, easy to maintain and easy to expand. For you who doesn’t know what an object literal is, it looks like this:

var myObj = {
  id: '1',
  name: 'Whatever'
};
alert(myObj.name); // Will alert Whatever

It’s basically a fast and easy way to create a Javscript object. Some of you might also recognize it as JSON, and that’s exactly what it is. JSON stands for Javascript Object Notation and is in fact a Javascript Object.

Initializing the map

To initialize the map we need to call the constructor of the Map class. It takes two arguments the first one being a reference to a HTML elemtn where you want the map to be inserted (often <div id="map">) and the second one being an object literal (options) containing a set of properties.

This is much like how it works in the old API. The big difference is that in the old API you had to call the method setCenter() immediately after calling the constructor in order for the map to display. setCenter() told the map what location would be the center of the map and what the initial zoom level would be. In the new API this is not neccesary since both these properties are passed in the option parameter. So instead of making two calls, you now have to do only one. An approach that I think makes a lot more sense.

Before we get into the details of what properties option contains, lets have a look at what the code to create a map looks like.

// Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(57.8, 14.0);
// Creating an object literal containing the properties we want to pass to the map
var options = {
  zoom: 6,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);

Options

The option parameter is, as mentioned before, an object literal containing the properties we want to pass to the map object. There are three required properties that must be passed to the map on initialization. These are:

• center
  This property sets the center of the map and takes a coordinate of the type google.maps.LatLng
• zoom
  This is a number that sets the initial zoom-level of the map
• mapTypeId
  This property sets what kind of map type that would initially be used. The most common type is google.maps.MapTypeId.ROADMAP

There are of course lots of other properties that you can use when initializing the map, including which controls to display and which features to enable or disable. For a full list see the documentation.

Live example

A live demonstration of a simple map

I’ve put together a live example of how to add a Google Map v3 on a web page.

Conclusion

In conclusion I would say that the Google Maps API team has done several things right here. First of all by using a proper namespace, thereby not cluttering the global namespace. Secondly by heavy use of object literals to pass arguments. This way the API is more consistent and also easier to expand in future releases.

Please note that the API is still under development and is still undergoing changes. The way it works might change before the final release.

This is the first article in a series about the Google Maps API V3, so keep your eyes open for the next one which will explore the different properties for the map object and how you can use these to make the map behave and look differently.

Using the MarkerManager

The MarkerManager is a very useful Open Source Utility Library for Google Maps with the sole purpose to manage larger amounts of Markers. If you add markers with the MarkerManager you can control at which zoom-levels they will appear. And you can also hide and show them dynamically.

If you want to learn more about the MarkerManager and other libraries out there that deals with markers, read my article Handling Large Amounts of Markers in Google Maps.

Adding markers with the MarkerManager

Now the most effective way to add markers to the MarkerManager is to first add them to an array that you then add to the MarkerManager with the addMarkers() method. The code to do this would be something like this.

// Init the MarkerManager
var mgr = new MarkerManager();
//Defining the array that will contain all markers
var markers = [];
// Creating a marker
var marker = new GMarker(new GLatLng(57.8, 14.0));
// Add marker to the array
markers.push(marker);
// Add the array to the MarkerManager
mgr.addMarkers(markers, 1);
mgr.refresh();

Obviously it’s kind of useless to add only one marker this way. It would only be useful if you had at least a few of them, but I think you get the point.

Hiding and showing markers

In the Google Maps API there are two handy methods to toggle the visibility of markers. These are GMarker.show() and GMarker.hide(). They both work as expected, you call hide() and the markers disappears and then you call show() and the marker is displayed again.

So to hide all markers in this example you simply do this:

// Loop through all markers and hide each of them
for (var i = 0; i < markers.length; i++) {
  var marker = markers[i];
  marker.hide();
}

A bug

There is however one caveat and that is when you zoom the map the markers will magically appear again. This is an annoying bug that only appears when you use it on markers added with an utility library.

Click the image to enlarge

The solution

So far I've only found one solution for this and that is to extend the hide method and tweak the code to place the marker outside the map, thereby making it sort of invisible.

// Saving the position of the marker and then place it outside the map
GMarker.prototype.hide = function() {
  if (this.getPoint().lat() < 90) {
    try {
        this.savePoint = this.getPoint();
        this.setPoint(new GLatLng(90, 0));
    } catch (e) { }
  }
}

Subsequently you need to prototype the show method as well so that it moves the marker into the correct position again.

// Restoring the position of the marker
GMarker.prototype.show = function() {
  if (this.getPoint().lat() == 90) {
    if (this.savePoint) {
      try {
        this.setPoint(this.savePoint);
        this.savePoint = null;
      } catch (e) { }
    }
  }
}

It's a dirty solution I know, but so far it's the best solution I've found and it works really well.

Note: I haven't come up with this solution myself but haven't been able to find where I saw it. So if you know who did come up with it, please tell me so I can give credit where credit is due.

isHidden()

The Google Maps API also offers a method to determain if a marker is hidden or not, GMarker.isHidden(). If you want to be able to use that you have to prototype it as well.

GMarker.prototype.isHidden = function() {
  if (this.getPoint().lat() == 90) {
    return true;
  } else {
    return false;
  }
}

Live examples

Live examples of the bug and the solution

I've put together a few examples of different scenarios using this, so that you will see the problem as well as the solution to it.

• Using GMarker
• Using MarkerManager
• Using MarkerManager - fixed

Other libraries

There are several other libraries for dealing with markers out there, and in at least one of them, Clusterer, I've noticed the same bug as in MarkerManager. The fix proposed in this article will work just fine on that one as well and possibly on other libraries where you might also find this bug.

If you've encountered this problem in other libraries please let me know. It would also be interesting to see other, and possibly more elegant solutions to this problem.

The API released now is still in Labs because it’s not quite ready yet. It only contains a basic set of features that will be further extended. 

Here’s a few of the changes.

• Improved performance, ecpecialy on Mobile devices
• The API is now built on an MVC-architecture
• The API-key is not required anymore.
• No global variables. Everything is now in the google.maps namespace

I will write more  about the changes in the API in  in future articles, but for now you can read more at the Google Geo Developers Blog. Also check out the documentation and the reference.

The authors

Designing Web Interfaces is written by Bill Scott and Theresa Neil. Bill Scott has a background at Yahoo! and is currently working at Netflix. This shows in the examples of design patterns since a lot of them is taken from these companies websites.

Theresa Neil is a User Experience consultant located in Austin, Texas. She has worked with Bill before at Sabre Airline Solutions to form their User Experience team.

Organization of the book

The book is organized around 6 design principles. For each principle a number of design patterns are explained. The principles are:

• Make it direct
• Keep it Lightweight
• Stay on the Page
• Provide an Invitation
• Use Transitions
• React immediately

At the Explore the book section at the books companion site there’s a short explanation of each principle as well as a presentation of the design patterns presented in each chapter. So if you want to know more about what the book is all about I suggest you look there.

At several places in the book the authors references to About Face 3 by Alan Cooper. I like that since I think that’s an indispensable book that every Interaction Designer should read.

My take

I think that this book serves both as an inspiration in finding the right design patterns for the projects I’m working on as well as a deeper understanding of the underlying core principles when choosing and designing interaction elements. It has certainly provided me with a deeper understanding of the ins and outs of drag and drop interactions which is thoroughly examined in the book.

The book is well written, contains lots of illustrations and generally provides really good examples. If you’re designing/building highly interactive web sites or is interested in learning more about web design patterns, I’m certain that you will benefit from reading this book. I highly recommend it!

Resources

The books companion site is located at www.designingwebinterfaces.com. There you’ll find more information about the book, as well as links to other resources about design patterns.

Title: Designing Web Interfaces: Principles and Patterns for Rich Interactions
Authors: Bill Scott and Theresa Neil
Publisher:O’Reilly Media, Inc.; 1 edition (January 30, 2009)
Pages: 332
ISBN: 0596516258
ISBN-13: 978-0596516253

In Joseph Selbie article Bringing Holistic Awareness to Your Design at Boxes and Arrows, he discusses the value of a holistic view. In a best-practice study conducted at Selbie’s company Tristream the following was revealed:

Those teams that achieved the highest degree of shared, holistic understanding consistently designed the best web applications. The more each team member understood the business goals, the user needs, and the capabilities and limitations of the IT environment—a holistic view—the more successful the project. In contrast, the more each team member was “siloed” into knowing just their piece of the whole, the less successful the project.

The conclusion from this is that each member of a project team, should at some level, be involved in the user research process. There should also be lots of information sharing between team members, preferably through participation and by oral presentations and discussions of results.

The dangers of siloing in

Joseph Selbie also writes:

The members of the teams that performed less well not only tended not to understand the application as a whole, they saw no need to understand it as a whole: programmers did not care to know about users, user researchers did not care to know about programming limitations, and stakeholders were uninvolved and were considered “clueless” by the rest of the development team.

This was a surprisingly common situation in many project teams, but one that clearly should be avoided.

Read more about this and what to do about it in the original article, Bringing Holistic Awareness to Your Design.

The three layers of the form

The authors introduces the concept of the three layers of the form. The book is organized around these three layers, so each layer has it’s own part.

• The first layer is about the relationship between the organization behind the form and the user.
• The second layer is about conversation. That is how the form talks to the user with it’s questions, labels and instructions. It’s also about how to logically group different kinds of information.
• The third layer is about the appearance of the form. Here’s where the design of the form is discussed. It’s also here where Caroline Jarrett gets to talk about her favorite topic, whether to put a colon at the end of the labels or not. (she doesn’t think it’s important , read why)

I think that this way of organizing the book works very well. It supports the design process presented and gives you a good understanding of what to focus on.

My take

I found Forms that Work fun and easy to read. It’s filled with illustrations and real-life examples, which makes it easy to understand how to put the concepts into practice. What I love about this book is that it’s compact and succinct. The authors deliberately decided to keep the book under 200 pages which I think was a very wise decision. The nitpicks I have is that I found quite a few typos. I also sometimes felt that the illustrations didn’t quite had the quality that I’d expect from a book like this. That said, these are only minor complaints and ones that shouldn’t prevent you from reading this otherwise excellent book.

Conclusion

This book will give you tips and guidelines that gets you started right away creating better web forms. The authors back their advice up with years of designing and usability testing forms, so you can feel pretty confident that they deliver good advice. There’s no doubt that after reading this book you will be able to design better forms. I highly recommend it.

Title: Forms that Work: Designing Web Forms for Usability
Authors: Caroline Jarrett and Gerry Gaffney
Publisher: Morgan Kaufmann (November 17, 2008)
Pages: 199
ISBN: 1-558607-10-2
ISBN-13: 978-1558607101

The add on docks itself to the side of the main Spotify application window. From when I’ve tried it, it finds most lyrics, but there are some that aren’t available.

ListDJ have been developed by a friend and college of mine, Fredrik Danielsson. To read more and to download it, visit www.listdj.se. The add on is completely free but is currently only available on the Windows platform.

About MapTooltip

In a project I’m working on there’s a need to have tooltips on polylines. I have tried to find simple ways of doing this but haven’t been able to find any. After researching this and eventually coming up with a solution I decided to package it into a small library so that I could share it with fellow Google Maps developers.

Reference

The constructor creates an object of the type MapTooltip. It takes two required arguments and one optional.

MapTooltip(reference:object, tooltip:string, opts?:object)

reference

The first argument, reference, is a reference to the overlay that you will attach the tooltip to, for example a GPolyline.

tooltip

The second argument, tooltip, is a string containing what will appear inside of the tooltip. You can either provide just a plain text string or some HTML.

opts

The third argument which is optional, opts, is an object literal that contains all options on how the tooltip will look and behave. It can have the following settings:

• width
  The width of the tooltip, ex: “100px”
• padding
  The padding around the content of the tooltip
  For a 3px padding: “3px”
  For a 2px top/bottom padding and a 5px left/right padding: “2px 5px”
• backgroundColor
  Backgroundcolor of the tooltip, ex: “#ff9″
• color
  The color of the text inside the tooltip, ex: “#000″
• border
  The styling of the border of the tooltip, ex: “1px solid green”
• fontSize
  The size of the text inside the tooltip, ex: “1em”
• offsetX
  The horizontal distance in pixels from the pointer to the tooltip, ex “10″
• offsetY
  The vertical distance in pixels from the pointer to the tooltip, ex: “10″

It might for example look like this:

var options = {
    'width': '250px',
    'border': '3px dotted #00f'
}

Using MapTooltip

To use MapTooltip is pretty easy. First add a Google Map as you normally would. Then follow the steps below to attach a tooltip to an object in the map.

1. Load the library

Import the library to the web page with the script tag.

<script src="http://maptooltip.googlecode.com/files/mapTooltip.js" type="text/javascript"></script>

2. Attach appropriate events

Add a mouseover event to the object on your map that you wish to have a tooltip. You will also have to add a mouseout event that removes the tooltip.

// Attach mouseover event to a polyline that will trigger the tooltip
GEvent.addListener(polyline, 'mouseover', function() {
	this.overlay = new MapTooltip(this, 'This is a polyline');
	map.addOverlay(this.overlay);
	// Attach mousout event to the polyline that will delete the tooltip
	GEvent.addListener(polyline, 'mouseout', function() {
		map.removeOverlay(this.overlay);
	});
});

That’s it. Be sure to check out the live demo to see it in action. The demo includes tooltips attached to markers, polylines and polygons. One of the tooltip is styled in a different way using the opts parameter.

Check out the live demo

Copyright

MapTooltip is released under the MIT License and is free for any use.

Downloads

mapTooltip.js

Acknowledgments

MapTooltip is heavily influenced by the article Custom Info Window / Popup for Google Maps, or Loving the GOverlay.

Known bugs

If you import the Google Maps API with ver=2.x it’s not going to work as expected since it seems that it doesn’t handle mouseover events on GMap2 when the pointer is over an GOverlay quite the same way as in previous versions. I don’t know if this is a temporary glitch or if it’s supposed to work this way in the future.

Update [2009-04-11]: In the latest release of the Google Maps API the above mentioned problems currently occur. I will try to find a way around, but until then you can stick to version 2.151 to make it work correctly.

For ideas on this or for other bugs you might encounter, please contact me either in the comments or through the Contact page.

The solution is quite obvious. It’s as simple as updating the src attribute of the image. The tricky part is to get the browser to actually display the new image and not just a cached copy of it. To do this we must trick the browser into thinking it’s a new file that it haven’t displayed before. This is preferably done by inserting a unique filename to the src attribute. There’s a couple a way of doing this but in this example it’s done by adding the time in milliseconds (ms) as a querystring at the end of the filename.

function updateImage(src) {
    if(src.indexOf('?') > -1) {
        src = src.substr(0, src.indexOf('?'));
    }
    return src + '?' + (new Date()).getTime();
}
var img = document.getElementById('myImage');
img.src = updateImage(img.src);

You could theoretically add a hash (#) after the filename instead of a querystring (?), but unfortunately that doesn’t work in Internet Explorer. So stick with the querystring and you will be fine.

The ASP.NET MVC Framework is still in beta (RC2) but is going to ship any day now. That’s good for me since I’ve built a web application with it that will go live pretty soon.

Download the chapter.

Read more on Scott Guthries blog.

In this article I will describe how to create it with the help of jQuery

The basics

The whole idea with this approach is to make the user aware that something has happened, or that an action has been performed. You want to make sure that the message gets across but at the same time you don’t want to annoy the user or get in his or hers way. One way to do this is to show a message across the screen that as soon as the user moves the mouse, clicks a mouse button or press a key on the keyboard fades away.

Watch the live demo

The HTML

The HTML is straightforward. Just insert this code somewhere in your HTML. Preferably at the top or the bottom of it. Just make sure it’s not inside a container with an absolute or relative position.

<div class="message">
    <p>This is a non-modal alert</p>
</div>

Give it some style

We will want the message to hover over the page. Therefor we want it to have an absolute position. By setting the width of the containing <div> to 60% and it’s left position to 20% it’s going to appear centered on the screen.

The other declarations are just for the visual appearance of the message.

.message {
    position: absolute;
    top: 145px;
    width: 60%;
    left: 20%;
    background: #ff9;
    border: 1px solid #fc0;
    font-size: 150%;
    padding: 15px 50px;
}
.message p {
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
}

The Javascript

The Javascript essentially checks if there’s a an element with the class message in the web page. If there is, it attaches a few events on it that when triggered, removes the message.

Notice that I use one() instead of bind() to attach the events. The reason being that once the event is triggered i doesn’t have to trigger again. With one(), jQuery automatically unbinds the event after it’s been triggered.

$(document).ready(function(e) {
    // Check if there's a message
    if($('.message').length) {
         // If mouse is clicked, moved or a key is pressed
         $(document).one('click mousemove keypress', function(e) {
            // Fade the message away after 500 ms
            $('.message').animate({ opacity: 1.0 }, 500).fadeOut();
        });
    }
});

Notice in the part where the alert is faded out, there’s first animate({ opacity: 1.0 }, 500). This is a hack to get a 500 ms long delay before the message starts to fade out. What it actually does is to change the opacity of the element to 1.0 over a timespan of 500 ms. But since the element already has the opacity 1.0 it just creates a 500 ms long delay before the fadeOut() part is executed.

This is all good and works well in most browsers except… you guessed it, Internet Explorer.

Extra tweaks for Internet Explorer

The problem in Internet Explorer is that the mousemove event triggers instantly even if you haven’t moved the mouse. Because of this we have to insert a short delay before the events are attached. In this example I’ve done it by moving the logic to remove the message to a function, removeMessage(), which I call from the setTimeout function. The second argument of setTimeout determains the delay in ms before removeMessage() is invoked.

$(document).ready(function(e) {
     // Check if there's a message
     if($('.message').length) {
         // the timeout is there to make things work properly in IE
         // If we have no timeout IE will trigger mousemove instantly
         setTimeout(removeMessage, 500);
    }
});
function removeMessage(){
    $(document).one('click mousemove keypress', function(e) {
        // Fade the message away after 500 ms
        $('.message').animate({ opacity: 1.0 }, 500).fadeOut();
    });
}

That’s it. Sadly the code is slightly less elegant, but at least i works in all browsers.

Check out the Live demo

Conclusion

I have found this solution to be an excellent way to tell the user what’s going on in an unobtrusive, but still obvious way. I hope that you’ll find it useful too. If you have a more elegant way of overcoming the problem with IE or other ideas on how to enhance this solution, don’t hesitate to tell me.

Checking if the page has subpages

I searched in vain for a method to determine if the current page has any subpages or not. I first assumed that there would be a has_subpages() method, but so far I haven’t found any. Lacking that, I came up with a very crude way of checking it. I explicitly had to try to fetch all the subpages with the function wp_list_pages() and then check if it returned anything. It’s not pretty but it works.

$children = wp_list_pages('&child_of='.$post->ID.'&echo=0');
if($children) {
    // This page has subpages
}

Checking if it’s a parent page or a subpage

The next thing I had to figure out was how to check i the current page is a parent page or a subpage. That’s done with the following code.

if(is_page() && $post->post_parent) {
    // This is a subpage
} else {
    // This a parent page
}

Fetching the submenu

Now I needed a way to fetch the subpages. This is done with the wp_list_pages() function. The tricky part about this is that there’s no way to get both the parent page and the subpages in the same call. So therefor we have to call the function twice. The call also looks a little different depending on if we’re on the parent page or on the subpage.

if(is_page() && $post->post_parent) {
    // This is a subpage
    $children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0");
    $children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0");
} else if($has_subpages) {
    // This is a parent page that have subpages
    $children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0");
    $children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0");
}

There are other ways of doing this, but the benefit of this approach is that we automatically get class="current_page_item" on the list-item that represents the page that we’re currently on. That’s handy if you want to style that item in any particular way.

Outputting the HTML

The last step is to output the actual HTML. I’ve chosen to output it as an unordered list.

<?php // Check to see if we have anything to output ?>
<?php if ($children) { ?>
<ul class="submenu">
    <?php echo $children; ?>
</ul>
<?php } ?>

Putting it all together

Now it’s time to put all the pieces together. Just put this code in your page template one of the pages in your template, like for example page.php or sidebar.php and you’re good to go. These pages are located in /wp-content/themes/your-theme/.

<?php
$has_subpages = false;
// Check to see if the current page has any subpages
$children = wp_list_pages('&child_of='.$post->ID.'&echo=0');
if($children) {
    $has_subpages = true;
}
// Reseting $children
$children = "";

// Fetching the right thing depending on if we're on a subpage or on a parent page (that has subpages)
if(is_page() && $post->post_parent) {
    // This is a subpage
    $children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0");
    $children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0");
} else if($has_subpages) {
    // This is a parent page that have subpages
    $children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0");
    $children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0");
}
?>
<?php // Check to see if we have anything to output ?>
<?php if ($children) { ?>
<ul class="submenu">
    <?php echo $children; ?>
</ul>
<?php } ?>

Conclusion

I think that WordPress is an absolutely awesome CMS/Blog engine, but it do lack some handy methods. Fortunately it’s almost always possible to create workarounds. I hope that you will find this useful in your own WordPress Template. Don’t hesitate to tell me if you have a smarter way of doing this.

In this article I will explore some of the Zooming User Interfaces out there today and also take a sneak peak of what’s around the corner.

Why Zooming User Interfaces

Consider this. You’re in a maze, unable to find your way out. Relying on maps you quickly lose your way since the human mind is not well suited for remembering long sequences of turns. Now imagine rising up in the air so that you can watch the maze from above. Suddenly it’s really easy to find your way out, or to find you way to any part of the maze.

The maze in this analogy are applications today, confined inside the constraints of the desktop metaphore. The map are menus, bookmarks and other aids we use to find our way.

Through the evolution of man we’ve relied on recognizing landmarks as means to find our way around. This is called spatial memory. We’ve relied on it to remember where we put our tools and hid our food. In ZUI’s we use this ability to find our way through vast amounts of data.

Are ZUI’s difficult to use or hard to understand? Personally I think that the widespread use of interactive maps such as Google Maps and Yahoo Maps have paved the way for Zooming User Interfaces. The zooming paradigm is natural once you’ve tried it and I suspect that it will be more and more common.

Examples of ZUI’s

Ever since I first got interested in ZUI’s I’ve seen an increase of them. Here are a several examples of applications using a Zooming User Interface today.

Prezi

Prezi is a tool for making zooming presentations. With an intuitive user interface it’s easy to create pretty impressive presentations. The cool thing is that the tools your working with in Prezi blends seamlessly with the presentation.

I’ve made a simple presentation called Zooming Interfaces on Prezi. Check it out to see what I’m talking about.

Seadragon

Seadragon is a tool from Microsoft Live Labs that let’s you use really high resolution images which you can zoom in and out of. In the first part of this video from TED Talks Blaise Aguera y Arcas from Microsoft Labs demonstrates it.

The Seadragon AJAX Library

With the Seadragon AJAX Library it’s easy to embed single high-res images into a web page. This image is about 35 megapixel. Click around in it to zoom in and out.

DeepZoom

Seadragon is implemented in Silverlight through DeepZoom. This combination enables you to create amazing applications where you can seamlessely zoom through huge amount of image data. It’s also possible to add other information aswell. Check out the examples below to get a sense of how it works. I think that the Hard Rock Café Memorabilia is really impressive.

Here’s some great examples of implementations of DeepZoom.

• Hardrock Café Memorabilia
  This is a display of memorabilia from Hardrock Café. By zooming and panning you can explore the content. When you zoom in on an object additional information about it is displayed.
• DeepZoom demo at Vertigo
  This demo illustrates how to navigate content with a zooming interface.

Mooncake

Mooncake is another implementation of Seadragon. It allows you to pick pictures from a Flickr or SmugMug account. It then automatically process them into Seadragon images.

Here’s a simple example made from photos from my flickr account.

Zoomorama

Zoomorama is a Flash based tool for making zoomable image albums. You can either add images directly through a web interface or install a desktop application. The desktop application provides you with more powerful tools to design the album as you like. You can for example add captions and arrange the images just as you like in it, something that’s not possible in the web app.

Example

This is an example of a Zoomorama album created with the web application.

OpenZoom

OpenZoom is an open source framework for the use of high-resolution images and Zoomable User Interfaces on the web. It uses an implementation of the Deep Zoom technique in Flash.

In part three of Daniel Gasienica article series Inside Deep Zoom there are several examples of implementations of this technique.

Google Maps

With creative use of the Google Maps API some people have created pretty cool ZUI’s. I’m sure that this was not the intended use for the API, but hey, why not?

Example of Zooming User Interfaces using the Google Maps API

• The Kremer Collection
  The Kremer Collection is a collection of paintings where you can examine the details of a painting by zooming in.
• zkimmer
  Zkimmer uses the Google Maps API to display magazines.

Zooming User Interfaces in Comics

Cartoonist Daniel Merlin Goodbrey are experimenting with new ways to experience comics. In the comic PoCom-UK-001 he uses a Zooming User Interfaces for the viewer to read the cartoon.

Zooming User Interfaces on Mobile devices

On mobile devices where screen estate is very limited a Zooming User Interfaces has proved its value to organize information.

Safari web browser

The Safari browser on the iPhone is one example of this. By being able to zoom in and out of web pages, we overcome the limitations of the small screen. On the iPhone there’s also the wonders of the multitouch screen which makes it natural to zoom in or out by tapping or by using the pinch maneuver.

Watch a video on how this works on apple.com

Firefox Concept Mobile Browser

Aza Raskin, Head of User Experience at Mozilla Labs, has developed a concept for a Firefox Mobile browser that utilizes a zooming interface among other interesting interaction techniques.

Read more about it onMozilla Labs and on www.azarask.in.

Future concepts

Aurora

Aurora is a future concept browser that Adaptive Path has developed for Mozilla Labs. It utilizes a lot of new interaction ideoms, zooming being one of them.

About 2 minutes into this movie, theres a sequence that nicely illustrates a Zooming User Interfaces to browse data. In this interface there’s also the Z-axel which represents time. The older the content, the farther away it is. It also fades with time. Check out my article Visualizing the age of content to read more about this concept.

Aurora (Part 1) from Adaptive Path on Vimeo.

What others have written

Dmitry Fadeyev at Usability Post recently wrote an article called Zoomable User Interfaces, where he discusses the benefit of ZUI’s as well as providing some examples.

There’s also an article on Wikipedia on Zooming User Interfaces.

Conclusion

I can definitely see a trend in ZUI’s. Ever since I first started getting interested about it I’ve seen an increase in examples of it. I feel pretty confident that we’re going to see a lot more of this in a not so distant future. Do you have more examples of the use of ZUI’s?

There are three ways to define a global variable in Javascript.

The first way is to declare the variable outside of any function.

var myGlobalVar = value;

The second way is to assign it as a property to the global object, which in web browsers are the window object.

window.myGlobalVar = value;

The third way is to use it without defining it. In this case it doesn’t matter if it’s inside of a function or not. This is called implied global.

myGlobalVar = 'Hello world';

A great way to minimize the use of global variables is to store them all in one global object. By doing this you can keep all you variables and functions in one place, greatly reducing the risk for name collisions.

// Define your global object
var myObj = {};
// Add property (variable) to it
myObj.myVar = 'Hello world';
// Add method to it
myObj.myFunctions = function() {
    // Do cool stuff
};

The Javascript language was designed with global variables like this to make it easy for beginners to start coding. The side effect being that it’s easy to forget to define a variable and thereby creating bug that are hard to discover. So do yourself a favor and avoid global variables whenever possible.

At a seminar I attended last week on Social Media one of the speakers Johan Ronnestam said that the reason Twitter is exploding right now is Barack Obama successful use of it during his election campaign. Every marketer worth his salt has now studied the phenomena and is busy trying to get everyone at their companies to use Twitter.

Today I also learned that Dalai Lama is now on Twitter. Watch his profile at @OHHDL. Pretty soon everyone will be on board, I’m just waiting to find my mothers Twitter profile!

If you want to join the trend, follow me on Twitter!

Update

Dalai Lama is now following me on Twitter! Even though I realize that it’s probably not Dalai Lama himself following me but rather someone administrating it for him, I can’t help thinking that it’s pretty cool!

Update 2

Dalai Lama was apparently a fake. That’s too bad because he was quickly becoming the most popular person on Twitter. Read all about it at the Next Web.

In this article I will show you how to add different kinds of Info Windows that appear when you click on a marker.

Content

• Basic Info Window
• Info window with tabs
• Info Window containing a Mini map
• Maximizing the Info Window
• Options
• Conclusion and further resources

Basic Info Window

The key method for opening an info window when clicking a marker is GMarker.openInfoWindowHTML(). It takes two arguments, first the text that will appear in the Info Window and secondly an optional object literal containing options you might want to use to configure the Info Window. To learn more about the available options, see Options further down the page.

In the examples for this article you have to click a marker to open the window. This is done by using the GEvent.addListener() method. I will not describe exactly how it works in this article but if you’re unfamiliar with it you can read more about it in the official documentation.

// Init a new map
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(56.87, 14.80), 11);
// Creating a new marker
var marker = new GMarker(new GLatLng(56.87, 14.80))
// Adding a click-event to the marker
GEvent.addListener(marker, 'click', function() {
  // When clicked, open an Info Window
  marker.openInfoWindowHtml('Some text');
});
// Add marker to map
map.addOverlay(marker);

This code will result in an ordinary map showing a marker which, when you click on it, pops up an Info Window.

Watch live demo

Info Window with Tabs

If you have a lot of information about each marker, more than you can fit inside a normal Info Window, you could use an Info Window with tabs. You simply define each tab as a GInfoWindowTab and add them to an array that you later on add to the marker using the openInfoWindowTabsHtml() method.

// Create an array that will hold the tabs
var tabs = [];
// Create tabs and add them to the array
tabs.push(new GInfoWindowTab('Tab 1', 'Content of tab 1'));
tabs.push(new GInfoWindowTab('Tab 2', 'Content of tab 2'));
// Add tabs to the InfowWindow
marker.openInfoWindowTabsHtml(tabs);

The result is a tabbed Info Window.

Watch Live Demo

Info Window containing a Mini map

The API features an easy method to open up a mini map over the area where the marker is located, showMapBlowup(opts?:GInfoWindowOptions). This method takes an object literal that have two possible parameters, InfoWindowOptions.zoomLevel and InfoWindowOptions.mapType. These lets you determine at what zoom-level the mini map should start and what map type it should show.

GEvent.addListener(marker, 'click', function() {
  // When clicked, open an Info Window with a min map in it
  marker.showMapBlowup();
});

You never thought it would be this easy to do this, did you?

Watch live demo

Maximizing the Info Window

If you have a lot of content to show in you Info Window it could be useful to let the user maximize it. This is easily done using the options maxContent and maxTitle. If you define these you will automatically get a maximize button in your window.

So to make this work just do like this.

marker.openInfoWindowHtml('Click the (+) to maximize me!', {
  maxTitle: 'Maximized Title',
  maxContent: 'Maximized content text.'
});

When you first click the marker an ordinary info window will pop up. When you click the plus sign (+) in it, it will maximize.

Watch live demo

Options

As I’ve mentioned earlier each of the methods that opens an Info Window takes an optional object literal with options. The properties you can use in it are defined in the GInfoWindowOptions class.

All properties doesn’t comply with all kinds of Info Window.

• selectedTab [number]
  Determines which tab should be selected when opening an Info Window. Starts with number 0.
• maxWidth [number]
  Sets the maximum width of the info window. Note: From my observations it seems that the minimum value for this is 249 pixels.
• noCloseOnClick [bool]
  Sets if the info window should be closed when clicking inside the map. Default value is true.
• onOpenFn [Function]
  A function that is called after the info window is opened and the content is displayed.
• onCloseFn [Function]
  A function that is called when the info window is closed.
• zoomLevel [number]
  Determines what zoom level an opened Mini Map should have. Only applicable with showMapBlowUp().
• mapType [GMapType]
  Determines what map type an opened Mini Map should have. Only applicable with showMapBlowUp().
• maxContent [string]
  Determines what content should be showed when an info window is maximized. It can be either an HTML string or an HTML DOM element.
• maxTitle [string]
  Sets the title for the window when it’s maximized. It can be either an HTML string or an HTML DOM element.
• pixelOffset [GSize]
  Specifies a number of pixels to move the info window away from the current GLatLng.

How to use them

The options are passed to the method in an Object Literal. Here’s an example of using the maxWidth property when opening a basic Info Window.

marker.openInfoWindowHtml('Some text', {maxWidth: '250'});

Conclusion and further resources

Info windows are a powerful way of displaying information about certain objects in a map. In this article I have showed you some of the basic ways to use the built in ones in Google Maps. I think you can go a long way with these techniques but if you have special needs there are third party extensions out there that you can use.

It’s beyond the scope of this article to describe how they work, but the first library to check out should be ExtInfoWindow, one of the open source utility libraries for Google Maps. You’ll find documentation and examples at Google Maps API Utility Library. Joe Monahan has also written some about it on the Google Maps API Blog in the article ExtInfoWindow 1.0: Ajax powered, CSS customization.

Mike William at Google Maps API Tutorial has described two other libraries in the tutorials Using the EWindow extension and Using the EBubble extension that also might be useful.

Happy coding!