In usability we trust

UX and all things web

Category: Tutorials

Adding Multiple Markers to Google Maps from JSON

Recently I’ve been receiving several emails from readers of my book, Beginning Google Maps API 3, that has a problem adding information to multiple InfoWindows when loading markers dynamically via JSON data.

In my book I have in fact described how to add multiple markers from JSON and how to attach unique InfoWindows to each of them. What I haven’t described is how to get the JSON-data to actually show up in the InfoWindows. This tutorial aims to describe how to do just that.

Continue reading

Calculating Distances and Areas in Google Maps API 3

As I mentioned in the article Extending Google Maps API 3 with libraries a couple of weeks ago, you can add functionality to the Google Maps API by using libraries. One of these libraries are the Geometry Library. In this article I will show how you can use the function of that library to calculate distances and areas. I will also explain some additional navigation functions that you might find useful.

Continue reading

Dynamically Toggle Markers in Google Maps

This article explains how to dynamically toggle the visibility of markers in Google Maps as well as how to deal with an annoying bug that occurs when trying to do this while using an utility library, like the MarkerManager.

Continue reading

Non-modal alert with jQuery

jquery-logoIn circumstances where you want to notify the user of something, like for example that some information have been saved, a non-modal alert is an excellent solution. It gets your message across without being intrusive and without the need for uneccesary user interaction.

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

Continue reading

Creating a Submenu in WordPress

For a project I’m currently working on I wanted to create a submenu that included the parent page as well as the supbages. I just wanted to display the submenu only if the parent page had subpages. Searching the WordPress Codex and googling for a solution I couldn’t quite find an example that took all these factors into consideration so I had to figure it out myself. Here’s the approach I came up with.

Continue reading

Working with Info Windows in Google Maps

Google Maps APIHaving Info Windows in a Google Maps is a powerful way of displaying information about a specific point or object. Did you know that there are several kinds of them?

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

Continue reading

Handling Large Amounts of Markers in Google Maps

Google MapsTo use markers in Google Maps is fairly trivial, at least when you have a reasonable amount of them. But once you have more than a few hundred of them, performance quickly starts to degrade. In this article I will show you a few approaches to speed up performance. I’ve also put together a test page to compare them.

Update [2009-05-06]:This article has been updated with the addition of the utility library MarkerClusterer. The test results in the end of the article and the test page has also been revised.

Continue reading

Basic operations with markers in Google Maps

Google MapsMarkers is one of the core features in Google Maps and an effective way of displaying places on a map. In this article I will show you how to add a basic marker to a map and also how to add some interactivity to it.

Continue reading

Unobtrusive Google Maps

When developing web applications we can never be sure what the environment for the user is. He could for example use our application from a mobile device with a browser with limited Javascript support. Like Roger Johansson pointed out in Making Google Maps more accessible, we must prevent our applications from breaking under these circumstances by making them degrade gracefully.

In this article I will show you how to make Google Maps degrade gracefully by providing a fallback for non-javascript users using the Google Static Maps API.

Continue reading

Simple maps with the Google Static Maps API

Google Static Maps API is an easy way to provide a map when the user doesn’t have Javascript available. Sure it’s not near as powerful as the full Google Maps API but still, it can provide you with a basic map that can contain both markers and paths.

Continue reading

Populating Google Maps with Microformats revisited

A few month ago I posted about a demo where I used content marked up with Microformats to populate a Google map using Javascript. Well, now I’ve improved that demo somewhat.

Continue reading

Polylines in Google Maps [Part 2]

In part 1 I showed how to use and optimize performance on polylines in Google Maps using Javascript. In this article I will show you how to get even better performance by encoding the polylines on the server.

Continue reading

Bounding Box in Google Maps

Normally when you initialize a new Google map you set the coordinates for the center of the map and manually specifies the initial zoom level. Sometimes, however, there’s a need to dynamically calculate the center point and zoom level for certain content to fit into the viewport.

Continue reading

Polylines in Google Maps [Part 1]

Polylines are used to mark out roads, borders and other things that are made of lines in maps. The Google Maps API offers a class for drawing these lines on a Google Map called GPolyline. In this article I will show you how to use these and how to deal with potential performance issues when the polylines gets more complex.

Continue reading


In the AJAX community, JSON have become the preferred way of sending and receiving data. That’s not surprising since it’s lightweight, fast and easy to understand. Also, since it’s a subset of Javascript, it’s familiar territory for Javascript coders.

In the ASP.NET MVC Framework, passing JSON from the server to the client script is almost too easy. In this article I will walk you through the code required to make it work.

Continue reading

Effective Use of Custom Icons in Google Maps

Google MapsI’m currently developing a web application that uses Google Maps and have lots of markers with custom icons to mark different things on the map. To administer all these different icons is quite a chore and it took me some time to find an effective way of working with them.

Continue reading

User Controls in ASP.NET MVC Preview Release 5

I’ve had a little trouble finding out how to use User Controls in the ASP.NET MVC Framework and how to pass data to it. I haven’t been able to find a single article that clearly explains how to do this, so I thought I’ll do a little write up on the topic.

Continue reading

Imagemap rollover

Imagemaps was very popular in the early days of webdesign but seem to have fallen out of grace. Probably due to accessibility problems and the rise of CSS based designs. I think that it still has it’s place when used properly and one being aware of it’s potential accessibility problems.

In a recent project I was building a map where different regions of a map would highlight when you hover with the mouse over it. Using an imagemap in combination with CSS and JavaScript seemed like the natural way to do it.

I thought that to actually code this solution would be pretty straightforward, but soon discovered some peculiar quirks. I also couldn’t find any information about this, so I thought that I’d share my experiences with you.

Continue reading

Looping with jQuery

I’ve started working with the Javascript framework jQuery lately and I must say that I find it very enjoyable! I have previously mostly used Prototype and DOMAssistant, and although they excel in some areas I somehow find jQuery more fun to code with.

Here’s a simple tip on how to loop through elements with jQuery that I thought I’d share.

Continue reading

Ultimate site logo

To have a good site logo is important. It’s one of the things that distinguish your web site from everybody else’s. It’s also a design element that exists on all pages within your site. Naturally you want it to be good looking, but at the same time it needs to be accessible and also search engine friendly. To do this properly there are some techniques worth knowing. In this article I will show you the approach I’ve taken on my own blog.

In my opinion a good site logo have these characteristics:

  • It’s search engine optimized
    Score high on Google
  • It’s clickable
    Support the strong convention that a click on the site logo takes you to the homepage
  • It’s accessible
    Enable those with screenreaders or images turned off to read the “logo”
  • It looks good
    A good looking logo is important to build your brand.

If you’re the impatient kind you can watch the example page right away. For an explanation of how it’s done, read on!

Continue reading

Marking up contact information with microformats

If you’re building web sites you probably mark up contact information every now and then. Why not do it in a standardized ways so that you are able to quickly mark it up, style it and enhance it with microformats at the same time? The way to do this is by using hCard, a microformat for marking up contact information.

This article will not only show you why you should do this, but also exactly how!

Continue reading

Using Microformats to populate Google Map

MicroformatsInspired by an article I’ve read on 24-ways I’ve built a demo-page for using content marked up with microformats to populate a Google Map.

Unfortunately the demo is in Swedish, but I think those of you who doesn’t speak Swedish can easily understand it anyway.

The main concept is to use a list of folksong festivals in Scandinavia, carefully marked up with microformats, as a data source. I then use Javascript to loop through the content and populate the map.

I got the list of festivals from Thank you Chris!

Continue reading