How big is the mobile web?

The amount of web pages that are being accessed by mobile devices is increasing day by day. In fact traffic to mobile websites in 2010 grew by 600%, the year before that it grew by 300%. In the last quarter of 2010 it out-shipped the combined global market of laptop, desktop and notebook computers This happened 2 years earlier than analysts had calculated. So it seems that the mobile web is really exploding and at an accelerating speed. (Statistics from Mobile First by Luke Wroblewski)

The test produces a 6 page pdf-report with your test result as well as personalized advice and best practices for creating mobile web sites.

GoMo

With the background of these numbers it’s not surprising that Google is encouraging companies and organizations to create mobile-friendly sites. After all, Google’s entire business model is dependent on that people can use the web effectively.

If you not convinced yet, here are some more statistics from the GoMo site. For example:

• “By 2013, more people will use there mobile phones than PCs to get online”
• “Mobile Searches have grown by 4X since 2010″
• “There will be one mobile device for every person on earth by 2010″

Source: GoMo – Reasons Mobile Matters

Test your site

I encourage you to test your own site on GoMo. Not the least for the fancy pdf report that you will get. You will also get personalized advice for your specific site as well as some best practices for building mobile websites.

Need help?

If you find yourself with a site that doesn’t score so well on the mobile-friendliness scale, don’t hesitate to contact me for a free quote. Maybe I can help you bring that score up.

In this article I will describe what those interests are and what will happen when any of them becomes too dominant. I will also share my thoughts on how to overcome imbalances.

The three major interests within a project

In any development project there are at least three different interests at play:

• Business goals
  The business goals of the product. For example to sell more products, to reduce the number of support calls or to strengthen brand awareness.
• Development opportunities
  The interests that the developers that actually builds the application have. Examples of these might be fast development, code reuse and maintainable code.
• User needs
  The needs of the end users. It might be a problem they want to solve or the need for an easy way to perform at certain task.

The image below illustrates a project with a balanced tension between the different needs. This is the ideal state in a project. Often it’s impossible to maintain a perfect balance but It’s important to always strive for it, at least if you want a successful project.

The three basic needs in every development project

Unbalanced projects

Stakeholder domination

Stakeholder domination

Although the business goals are really important, since they are the very reason that the application exists, it must not be a too dominant interest. When that happens the result is a product that fulfills business goals but are expensive, buggy and fails to meet user needs.

Failing to meet user needs often lead to that the business goals are ultimately not met. A product that’s unusable or doesn’t make it worthwhile to use will probably be abandoned sooner a later.

An example of this could be that a business goal is to collect as much user data as possible with an extensive sign-up form to get good sale leads. The user on the other hand wants to try out the application before making a big commitment. The huge form seems daunting and the user is reluctant to give away personal information this early in the process. This leads to fewer users actually signing up, and business goals are not met.

Developer domination

Developer domination

If developer needs dominates the end result is a cheap solution of high quality that fails too meet business goals or to address user needs.

Having the perfect application with brilliant algorithms and perfectly tuned databases is never a mean to an end. It doesn’t matter how awesome your solution is if it fails to meet business goals. This means that the application probably can no longer exist, since its ultimate success depends on business goals being fulfilled.

User domination

User domination

While it’s important to focus on user needs the project must never lose sight of business goals and developer needs. What happens is that you end up with a solution that indeed fulfill user needs but is expensive, buggy and fails to meet business goals.

This is, in my experience, rarely a problem. More often I think the problem is that user needs are totally neglected. Fulfilling user needs often goes hand in hand with meeting business goals. But there are of course often compromises that needs to be made between the two.

So also with developer needs. Some functions that would have been perfect for the user might be to complicated or expensive to develop to be a viable solution.

My thoughts on keeping a good balance

I personally think that good communication within a project, combined with an awareness of the different needs, is key for a successful project. The biggest mistake to make is to isolate developers and designers from the stake holders. There’s everything to win in keeping them involved in this process so they also have an awareness of business goals and how the customer thinks.

This goes both ways. Having a dialog between stakeholders, developers and designer leads to better understanding of all the different needs. My experience is that it also leads to stronger commitment within the team and that it can lead to new great ideas that neither party would have come up with in isolation.

Finally I think it’s important to have a dedicated member of the team that has the users interests in mind. Be it a UX-designer, and interaction designer or one of the developers. Far to often this is the one interest that is forgotten altogether. One way to raise the awareness of user needs is to conduct usability tests with the whole project team as observers. That’s usually a real eye opener.

How does your projects work? Are they dominated by any particular interest or is one interest totally forgotten? How do you keep the interests balanced?

Read more

If you want to read more about the tension between different interest in a project and techniques to find a good balance, I suggest you check out the excellent book A Project Guide to UX Design. Pay special attention to Chapter 9 – Transition: From Defining to Designing, where this process is described in detail. You can also check out my full review of the book.

Although they’re all about UX Design, they’re still very different in their approach to the subject. I list them here, from the most practical to the most theoretical.

Undercover User Experience Design

Buy from Amazon.com

The first book out is Undercover User Experience Design by Cennydd Bowles and James Box. Both designers at the renowned web agency Clearleft. This book takes a pragmatic approach to the UX process. The authors recognize that it can be hard to do UX-work in an organization that has not yet realized the benefits of UX. This book is all about how you can sneak in this kind of work anyway to slowly get the organization in the know.

Undercover User Experience Design offer very practical and cheap approaches for conducting:

• User research
• Idea generation
• Prototyping
• User testing

Who is this book for

If you want a hands-on book with practical suggestions on how to perform UX work, this is a good book to start with. Also if your dealing with clients that don’t get UX or work within an organization that don’t get it, I highly recommend you buy it.

Book information

Title:

Undercover User Experience Design

Authors:

Cennydd Bowles and James Box

Publisher:

New Riders Press; 1 edition (September 27, 2010)

Pages:

192

ISBN:

0321719905

ISBN-13:

978-032171990

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Sketching User Experiences

Buy from Amazon.com

Sketching User Experiences was not at all what I expected it to be. I thought it would be a book on how to use sketches on paper for designing user interfaces. It turned out that the author Bill Buxton means sketching in a much broader sense. In his definition a sketch is:

1. Quick: quick to make
2. Timely: can be provided whenever needed
3. Inexpensive
4. Disposable
5. Plentiful
6. Clear vocabulary: the style makes it clear that it is a sketch and not a finished product
7. Distinct gesture: similar to the vocabulary, sketches are distinctly open and free
8. Minimal detail
9. Appropriate degree of refinement
10. Suggest and explore rather than confirm
11. (Intentional) Ambiguity

With this definition a sketch can be anything from a carved out piece of wood that represents a PDA to an actual sketch on a piece of paper. What he proposes is that you should always do different types of prototyping to test a product out before starting to actually create it. What this process aims for is to not only get the design right but also to create the right design.

That the book wasn’t what I expected wasn’t a bad thing. I think Buxtons thoughts on the design process is very interesting and all viable if you’re in an organization with big budgets for this kind of work. And even if you’re not, there’s still a lot of interesting ideas in it that you can apply to your work.

The book is both very practical and theoretical. While it discusses the design process from both a design, development and business perspective on a fairly theoretical level it also supplies lots of hands on examples and approaches.

Who is this book for

If you’re interested in the design process not only from a designers perspective but also from a development and business perspective this book is definitely for you. Also if you’re interested in prototyping on different levels, this might be an interesting book for you.

Book information

Title:

Sketching User Experiences

Author:

Bill Buxton

Publisher:

Morgan Kaufmann (March 30, 2007)

Pages:

448

ISBN:

9780123740373

ISBN-13:

978-0123740373

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Simple and Usable Web, Mobile, and Interaction Design

Buy from Amazon.com

The book Simple and Usable is about creating simple and usable digital products and services without dumbing down. According to Giles Colborne, the author of the book, there are essentially 4 strategies for reducing complexity without losing important features:

• Organizing
• Removing
• Hiding
• Displacing

These 4 strategies is the core of the book and they’re beautifully illustrated by applying them to the design of a complex remote control. There’s also lots of other examples.

The book is organized into 8 parts which each consists of several chapters. Each chapter is just one page long which I think is an interesting approach. It makes the book really easy to digest and also makes it easy to later look up things.

Who is this book for

If you have already have some experience in design and wants a fresh perspectives on interaction design for web and mobile platforms, this book will be good for you. Apart from the four core strategies for reducing complexity it contains a lot of other gems that you can use to improve you designs.

Book information

Title:

Simple and Usable Web, Mobile, and Interaction Design

Author:

Giles Colborne

Publisher:

New Riders Press; 1 edition (September 26, 2010)

Pages:

208

ISBN:

9780321703545

ISBN-13:

978-0321703545

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Living with Complexity

Buy from Amazon.com

Living with Complexity is the latest book by Don Norman. If you’re not already familiar with his work he’s written several seminal books on usability and is one of the pioneers in the field. (You should definitely check out The Design of Everyday Things) In Living with Complexity he addresses the fact that we live in a complex world. Norman writes about the dilemma that we crave simplicity but in reality need complexity.

A good metaphor for this is the cockpit of an airplane. For an untrained person it looks very complicated with its vast arrays of dials and instruments. For the trained pilot on the other hand, it looks very well organized and suited for their needs. A cockpit can’t be dumbed down to a single instrument, because all the instruments are needed for the pilot to take the plane safely from one airport to another. Therefore other strategies are required, training for example.

Who is this book for

This book is more academic and theoretical in nature than the others. If you’re looking for a practical book on how to do design, this book is not for you. But if you more interested in the philosophical side of design, I strongly recommend it.

Book information

Title:

Living with Complexity

Author:

Donald A. Norman

Publisher:

The MIT Press (October 31, 2010)

Pages:

280

ISBN:

0262014866

ISBN-13:

978-0262014861

Buy from Amazon.com
Buy from Adlibris.com (Sweden)

Conclusion

These were a few of the books that I’ve read recently. I think they all have something to bring to the table in their own unique ways. Personally I believe that reading books is one of the best ways to get better at what you do. It not only expands your horizons but also confirms the knowledge you already have and can spark new ideas that you can use in your work. If you’re interested in more book on usability and UX you might want to read 5 Essential Books on Usability, an article I wrote a couple of years ago.

So what do you think? Have you read any of these books or any others on UX recently?

In a nutshell it’s an Action button that transforms into a Confirm button when clicked. It’s a compact solution that provides the user with a way to confirm a possibly destructive action without interrupting the flow of the application.

What problem does it solve

The problem with confirmation dialogs is that they interrupt the flow of the application. Often these dialogs are modal so the user has to stop and deal with them to get on with whatever it was she was doing. The Action-Confirm design pattern presents a less intrusive solution that also is very compact. It keeps the user in the flow and is very quick to act on.

When to use

Use this design pattern when:

• The user needs to confirm an action
• Screen estate is limited
• You want something less intrusive than a regular confirm dialog

The solution

The user is presented with a list of items. Each item has one or several actions. In this example the action is a Delete icon.

A list with items that can be deleted

When the user clicks the Delete icon it transforms into a Confirm button that looks distinctively different. The user can now either click the Confirm button to proceed with the action or click outside it (or press Esc) to revert to the previous state.

A Confirm button appears in place of the Delete icon

If the user clicks the button it’s replaced by a loader animation. It’s important to provide this feedback so the user knows that work is being done under the hood.

A loader animation is displayed while the item is being deleted.

After the item has been deleted on the back-end the item is being removed from the list.

The item has been deleted and removed from the list

If something would go wrong and the item couldn’t be deleted, the item is reverted to its original state and an error message is displayed (not shown in an image).

Caveats

Graceful degradation

In a web environment this design pattern depends on JavaScript to be available. You therefor need to provide a fall back solution in cases when JavaScript and/or CSS aren’t available (Progressive enhancement). One way to do this, and how I implemented it, is to let the default action of the delete button (which in fact is a <a>-element) be to navigate to a confirmation page that has a form with a submit button. It’s important that the form is posted using the method POST and not GET.

As a fallback the delete action is confirmed by posting a form

Note: The reason you should never let a regular link (or a GETrequest) make a destructive action is that it makes the application very vulnerable. Imagine for example a search spider following all delete links. Uh oh!

Use undo instead

Naturally one can argue that a better design is to instead of making the user confirm an action, let her easily recover from errors by providing some kind of undo. However, in some circumstances this isn’t an option because of limitations in the underlying implementation. In these cases the Action-Confirm design pattern could be a viable solution. Read more about using undo in the article No undo? Redo!.

Don’t we want to interrupt the user?

One can also argue that it’s a bad thing not to interrupt the user with a modal dialog. After all, doesn’t we want the user to stop and evaluate whether the action was intended or not. Research has showned that users often just click through these dialogs without giving them a second thought. In these cases the dialog becomes useless and nothing more than an annoyance. This design pattern doesn’t solve that problem but it minimizes the intrusiveness of it.

Conclusion

I created this design pattern to solve a common problem: Confirmation of an action. What do you think? Is it better than a regular confirmation dialog? Could it be further enhanced? Are there any other problems with it?

New imagery

To enable this new view there’s one new property in the MapOptions object that you need to be aware of, it’s called tilt. It works in cooperation with the Map types SATELLITE and HYBRID. So unless you set the map to use one of these, the map won’t work. Here’s how tilt work:

• tilt
  Enables the 45° imagery view and takes a number as its value. This value must be set to 45. Note that the mapTypeId property must be set to either SATELLITE or HYBRID for this property to work.

This particular view is only available from zoom level 18. It can be enabled by the user with a drop-down option in the Map Type control. Try hovering the Satellite button in the example below to display the option to switch 45° view on and off. If you ascend over zoom level 18 you will notice that this option is grayed out and regular satellite imagery is displayed.

To create the map displayed in the example below this code is used. It opens up a map centered over Stuttgart Schlossplatz at zoom level 18, with tilt enabled:

var options = {
  zoom: 18,
  center: new google.maps.LatLng(48.7783, 9.1807),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  tilt: 45
};
var map = new google.maps.Map(document.getElementById('map'), options);

See example in full size

Rotate Controls

With this new functionality new controls are needed. When the large navigation controls are displayed an additional circle is displayed around the pan control. It’s the same that’s available in street view. You can drag it around to see imagery from different angles.

The new Rotate Controls

Additionally there’s a smaller rotate control positioned right above the zoom control. It rotates the imagery 45 degrees clockwise each time it’s clicked. This control is available in both regular and compact view.

Only the small rotate control is available in compact view

Current coverage

Only selected cities are available at this time but new ones are continuously being added. To see the cities that are currently available, check out this map.

Overview Map

Another new feature in API v3 is something that’s been available in v2 for a long time, an Overview Map. It’s a small fold out map in the lower right corner of the main map that provides an overview of the area you’re currently watching. To enable it there are two new properties in the MapOptions object:

• overviewMapControl
  Enables the overview map and can be either true or false. The default value is currently false which means that it’s not visible. (See note below)
• overviewMapControlOptions
  Takes an object literal as its value which has one possible property: opened. Set this to either true or false depending on if you want the map to be folded out when the map loads or not. The default value is false.

Note: In a few weeks from now (March 17, 2011) the default value of overviewMapControl will be changed from false to true. This means that you need to explicitly set it to false unless you want your maps to be enabled with an overview map.

Below is an example map which has an enabled overview map that opens when the main map loads. The map is centered over Heroes’ Square in Budapest at zoom level 19. Here’s what the code looks like:

var options = {
  zoom: 18,
  center: new google.maps.LatLng(47.5153, 19.0782),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  tilt: 45,
  overviewMapControl: true,
  overviewMapControlOptions: {
    opened: true
  }
};
var map = new google.maps.Map(document.getElementById('map'), options);

See example in full size

More information

For more information check out A new angle on the world with 45° imagery on the Geo Developers Blog.

For a complete list of all new features and fixes in the 3.4 release, check out the changelog.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

This article will describe how to do just that and what libraries that are currently available.

Libraries

There are currently 2 libraries available. These are:

• The Geometry Library
• The AdSense Library

This list will likely grow as the API matures. It’s actually a great plugin architecture that lets the API evolve nicely with side-track functionality without interfering with the core API functionality.

The Geometry Library

The Geometry Library includes methods to calculate distances and areas as well as methods to encode and decode the points used in polylines and polygons (Encoding is a technique that’s used to compress and optimize polylines and polygons).

The AdSense Library

If you want to display ads in your map, the AdSense Library provides methods to do just that. Note that it requires that you have an AdSense account that’s enabled for AdSense for Content.

To see how these might look like, check out this example from Google. To the left of the map you can choose the format of the ads.

How AdSense might look on a map

Including a library

To include a library in the API you need to reference it in the <script> tag where you include the main API. This is done by adding an additional parameter in the URL called libraries. This is how to include the Geometry Library.

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

Note: To add more than one library you add them separated with a comma.

Accessing the methods

The methods of the library are accessed through the google.maps.libraryName namespace. So for instance; to encode the path of a polyline (a feature of the Geometry Library) you write this:

var encodedPath = google.maps.geometry.encoding.encodePath(myPath);

Summary

Libraries are a powerful way of including more functionality into the Google Maps API. If you have the need for additional geometry functionality or need to include ads in a map, you can start benefiting from them right away. For other needs, I’m sure that new libraries will gradually be added as the API evolves.

Resources

To read more about how to use the Google Maps API 3 Libraries check out these resources:

• Libraries in the V3 Maps API
• Geometry Library – Documentation
• Geometry Library – API documentation
• AdSense Library – Documentation
• AdSense Library – API documentation

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

The API team however, wasn’t satisfied with just adding what was available in v2. They also added a drop animation similar to the one found in Google Maps on the iPhone. It looks like the marker is being dropped into place from above and then ends with a small bounce.

But they didn’t stop there either. They also added the ability to animate the markers at will. So now we can trigger the animation whenever we feel like it using the setAnimation() method of the Marker object.

Making the markers drop from above

When you create a new marker and want it to drop into place on the map, you can set the animation property of the MarkerOptions object to DROP. The marker will then fall from the sky when added. Also notice that I’ve set the draggable property to true to enables drag and drop functionality.

new google.maps.Marker({
  position: latLng,
  map: map,
  draggable: true,
  animation: google.maps.Animation.DROP
 });

Triggering an animation

The setAnimation() method takes a constant from the Animation class and can be either BOUNCE or DROP.

To turn an animation on or off you simply call the method on the Marker object:

// Make a marker bouce
marker.setAnimation(google.maps.Animation.BOUNCE);
// Stop the animation by passing null to the method
marker.setAnimation(null);

See it in action

I’ve created a demo that demonstrates these new features. It adds markers with a DROP animation and you can then make them dance by triggering the BOUNCE animation. The markers are draggable so you can try dragging them around to see how they behave.

Check out the live demo

Read more

Be sure to check out the announcement in the article: The map markers! They move! on Google Geo Developers Blog and also check the documentation out.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

As opposed to previous version of Google Maps API, version 3 is designed specifically with mobile devices in mind. What this means is that the performance on mobile devices is a lot better. Version 3 of the API loads, for example, more than twice as fast on the iPhone as the old version. This makes it especially well suited for mobile browsing. You don’t have to do anything particular to make it work on these devices but there are a few things that you need to consider.

Tip: If you don’t yet know how to use the Google Maps API v3, I suggest that you read the previous articles in this series before plunging into this one.

Maximizing the Viewport

Since the screens of mobile devices are a lot smaller than on desktop platforms the first thing you want to do is to make sure that as much screen estate as possible is used for the map. This is done by setting the width and the height of the map to 100%. Assuming that the element containing the map has the ID="map", here’s what the CSS will look like:

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

Notice that the height of the <html> and <body> tags are set to 100% with zero margin. The reason for this is to make sure that the web page covers the entire height of the browser and that there’s no white space around the map.

In the left image the default margin prevents the map from covering the entire screen, whereas in the right image the margin is set to zero.

Disabling page zoom

Mobile devices with touch screens often uses the pinch maneuver for zooming the web page. When you have a map on that page, you probably want the map to zoom rather than the entire web page. Fortunately there’s a special <meta> tag that can be used to disable page zooming. It must be placed in the <head> section of the page and looks like this:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Using this you make sure that the map work as expected. Browsers that doesn’t support this tag will simply ignore it, so it’s safe to use.

No hover state

One final consideration that needs to be made is that there’s no such thing as hover state (mouseover) on mobile devices. Therefore you need to make sure that you don’t use this for essential interactions such as showing vital information.

Live demo

To see that this demo actually works as expected you need to access it from an iPhone or an Android based phone. But it is of course entirely usable by desktop browsers too. What you get is a web page with a maximized map regardless of what device you use to access it.

Check out the live demo.

Conclusion

Developing maps for mobile devices is really not that different from developing them for desktop browsers. As long as you’re aware of their limitations you should be fine. If you want to learn more about developing for the iPhone, check out the Safari Dev Center. To learn more about developing for Android based phones, check out the Android documentation.

Do you know of any other considerations that need to be made when developing maps for mobile devices? Please share in the comments!

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

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.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com