Map Pin Interaction

Map Interaction, 2005

An interaction detail used on local search sites.

Most local search sites show a list of locations and a map. Each location is marked with a pin on the map. Frequently, the pins are pretty close together. The locations may be fairly close, or the map is zoomed out enough that they overlap.

This makes clicking on a map pin more difficult.

It’s pretty common to show a ‘balloon’ with additional information when you click on a pin. But when they overlap, it can be difficult to target the pin you want. Often you have have to zoom way in to click the right pin.

To avoid this, instead of showing the normal balloon, show a menu that lists the locations.

This example is from a web app created using the Placeable locator platform. But I first designed this interaction for Local Matters and we used it in the yellow page apps we built. The font in this example is a little smaller than I’d like. Ideally the click targets would be bigger, and there’d be more space between them.

The menu shows the location letters and names. Clicking a link shows the info for that location.

Other details:

  • The pins are labeled with letters instead of numbers. I first saw Google do this in 2003 or 2004. If the pins are labeled with numbers, some clients will want to number the pins sequentially, with pins 1–10 on page one, 11–20 on page two, and etc. Showing two digits on the pins is awkward.

  • The pins are layered in reverse order, pin A on top of B. The “natural” way to layer the pins results in pin A at the bottom and pin E on top. That’s what happens if you add the pins to the map in order.