Adding Interactive Mapping to Your Site

Almost everyone is familiar with interactive mapping services like those offered by Google, Yahoo and MapQuest. What you may not know is that these services can be embedded in your own website to make it more user-friendly.

Simple Map

The simplest use of mapping is to show where you are located, as in the example to the left.

You might be thinking to yourself, "I could just have a graphic artist draw a map for me". Yes, you could. But a static map makes certain assumptions about what the visitor already knows about where you are located. Why not accommodate a larger audience.

With an interactive map:

• The visitor can adjust the map according to their needs. For example, a visitor who is not familiar with the area being shown can zoom out and move the view around to find a familiar connecting area.
• The visitor can ask for detailed directions from their starting point.

Multiple Locations

An interactive map is not limited to a single location.

The map to the right, from the website of an organization of wineries and winegrape growers, shows the location of that organization's members.

A visitor can click on any of the icons to get additional information (see below).

This example also illustrates that additional information can be added to the map. In this case, the outline of the area covered by the organization is shown in red.

Custom Icons

All of the map examples so far have used the map provider's default icons. This is not a limitation; you can have your own custom icons. You might want to do this simply to make the map look less generic. But, depending on the circumstances, custom icons may actually help the visitor.

The map section to the left is from the website of a different organization of wineries and winegrape growers. In this case the icon show the type of member — a wine bottle for wineries and a grape cluster for growers.

A visitor only interested in, say, wineries could use this information to quickly identify the locations of interest.

Location-Specific Information

The visitor will often be looking for additional location-specific information, e.g. hours of operation or telephone numbers. Where does that go on the map?

In an interactive map, each icon can have any amount of information available with just a click.

The image to the right shows the website map from the same winery/grower organization mentioned above under "Multiple Locations". In this example, the visitor has clicked on the icon for one of the wineries.

The result is a popup box showing an appealing photo, the winery description, address, phone number, email, URL, etc. The possibilities are almost endless.

Custom Integration

Everything we've talked about so far has been "built-in" map functionality. What if your particular application would benefit from something a bit more sophisticated?

If you're willing to hire someone to do some programming, you can get almost anything you want. The interactive mapping services allow your applications to control virtually every aspect of the map. You can use these capabilities to add new map functionality or to integrate the map with your own information.

This site we just discussed uses this capability to provide visitors directions. At the bottom of each winery's popup box are links that the user can click to get directions to or from that winery.

In the example above and to the left, a visitor has selected a winery and asked or directions from their place of lodging. As you can see, the software has printed the directions on the left-hand side of the screen, drawn the route on the map and changed the map type so that the route is more visible.

Your Website

I hope that this discussion has given you some ideas about how interactive mapping can add value to your website. If so, I'd love to hear about it.

Note: This is a post I originally wrote for the Vintagefactor blog and moved here.