Map Navigator


Users need to find a location of choice on a map


Show a map with the points of interest and provide navigation links in all corners


Use when

The site has the possibility to search for a 'special location'. For example, a Corporate Site or E-commerce Site may have Store Locator to allow users to find a physical store. In other cases such as a website that allows people to find arbitrary destinations, users will see their Search Results a positions on a map.


The map is displayed with the points of interest (poi's) in the center of the image. Mark different poi's using different flags or colors and provide a legend explaining them. If there is only one poi, provide the exact details of that poi. When there are multiple poi's, Minesweeping can be used to display details of the poi as the user moves the mouse over it.

Users can move their 'window' on the map by selecting any of the navigation links in the corners. The page will reload and show a slightly different portion of the map. Add zooming and indicate the scale of the map. Many people may want to print the map so that they can take it with them, so a Printer-friendly Page must be available.


We know maps from the real world and we are comfortable with seeing them on the web. The navigation features are not ideal on the web since it requires reloading of the page but this will not lead to usability problems.

More Examples

plml logo


5 comments have been added to this pattern

nate, 29th August 2007
why not have the map be draggable?
tim, 4th November 2007
I agree. There's a usability issue with direction arrows at the edges of the map - the user has to move the mouse from one edge of the map to the other to change direction.
Damon, 12th August 2010
This needs a refresher... Google Maps has made clicking arrows to navigate around maps decidedly clunky!
Michael Gaigg, 18th May 2011
I agree with Damon. Map Navigators do not use pan arrows anymore. They became map navigation controls on the map, preferably in the top left corner of the map.
Marcus, 7th June 2012
For print pages etc static maps are still relevant. For them, narrow navigation is still useful.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below