How to add clickable world map or office maps to SharePoint?

We have SharePoint users asking to have the clickable world map and office maps inside SharePoint sites. The links could redirect users to navigation to those site-specific pages or the office locations with Google map directions.  You could also add a label that your users will see on mouse-over as "screentip". In SharePoint 2010, this is quite simple as shown in the following procedure. We will use world map as example.

1. Find the best world map users like and you could find here
2. Upload the map image to SharePoint Picture Library of the site
3. Add a Content Editor Web Part to the page
4. In the Format Text ribbon section, click HTML / Edit HTML Source.  A new "HTML Source" window will open where you can paste the following HTML.  Click OK when you have pasted it.

<map name="FPMap0" id="FPMap0">

<area alt="China" coords="297, 56, 293, 46, 300, 43, 303, 36, 297, 28, 285, 31, 280, 40, 271, 41, 265, 40, 248, 34, 240, 33, 235, 43, 245, 51, 255, 57, 272, 62, 274, 69, 293, 77, 288, 69, 286, 64, 294, 63" shape="polygon" href="http://google.com">

</map><img src="../Pictures/world.bmp" usemap="#FPMap0">

The map is saved in Picture Library as world.bmp. Here is the map.

Now you have a clickable link pointing to Google URL around China area! Well, the questions you will ask are how can I generate the HTML with the coordinates for the areas we need?

The blog published by Sadalit Van Buren provides you very easy way to generate the HTML you need to configure the Content Editor Web Part. There are some tools listed here will help you get the coordinates easily. Here is the list of the tools you might use.

• Use an Image Map Editor
• Create an Image Map with Dreamweaver
• Create an Image Map With Microsoft FrontPage

If you need any rich tootip on the map, please refer the Bryian Tan's blog. There are some good ToolTip / RadToolTip with ImageMap from Telerik. We are in the process to generate the company building map with links to each building address and Google map directions. This will be very simple process for any developer.