Home > Computers > Web Design
Question: "How do I make a clickable interactive map for customers to click U.S. States and find local services?"
What you will need to make an interactive map of the United States (USA):
Step 1 - Setup your web page directory / file structure if you don't already have a website:
a) Create a folder on your desktop called MyWebSite. Inside this folder create another folder and call it Images.
b) Get a U.S. map image file and save it to your images folder. You should give your map a simple name like us_map.gif
c) Open your HTML editor and create an HTML document (or a template you already created) and save it inside your MyWebSite folder as map.html. See the examples below.
Step 2 - Open your map.html file in your editor. Add a title to your HTML document. You can add other META information like description and keywords at a later time so that search engines can properly index your interactive map page once it's online.
Step 3 - Decide where you want to place the map image inside your web page. For this example we will keep this simple and insert the map without any additional steps like placing it inside a table or using DIV/CSS to define exact location on the page. Steps to insert the image in Dreamweaver are explained below:
a) On the upper tabbed panel Common click the insert image icon. You may be prompted to insert ALT attribute text to describe the purpose of the image. For this example type in "My Company Services Locator" or whatever you want. You can change this later.
b) Browse to the MyWebSite/images folder to select the us_map.gif - This will place the map in the upper-left of your web page. In the source code view it will look like this: <img src="images/us_map.gif" alt="My Company Services Locator" width="450" height="288" />
c) Save changes before moving to step 4.
Step 4 - Before we begin creating the clickable/interactive states themselves, start thinking about how you want users to see results after they click on a state. The information I'm referring to are the actual names, addresses, phone numbers of companies or service locations presented to the user after a state is clicked. There are numerous ways to display this information and unlimited potential to create various visual styles for the data presented. For this example and to keep things really simple, we won't worry too much about the "look". We will also use an empty anchor point approach to display static information on the same page where the actual image of the United States exists. However, this information presented to the users could easily be developed in a more user-friendly or using CSS with a dynamic/database driven backend and using ASP, PHP, JavaScript or similar programming language to truly tie things together and to streamline the data presented. If you need guidance in this area of creating a more dynamic or integrated solution contact info@monkeydoit.com.
Step 5 - As described in the previous step, we will use a simple empty anchor point approach to display static information for the purposes of this article. Empty anchor points are invisible points that mark content so that when referred to by a normal link (one of the linked states you will create in step #6), the user is delivered to that location within the web page. In the source view they look like <a name="florida"></a> . The red x areas in the example to the right would mark where you would place your empty anchor points but inside the source view. Click here to download the starting template .txt file you can use by copy/pasting the code just below your map image. It should appear similar to the example below once you are done.
Go To Next page: Step 6 >> Make U.S.A. Map "Hotspots" for Your Interactive Map >>
How to Make an Interactive Map of the USA
What you will need to make an interactive map of the United States (USA):
- A U.S. Map Image (for this example I have obtained a license from HitGuru's clickable US maps)
- An HTML WYSIWYG authoring / editing tool such as Dreamweaver or Frontpage. The example shown here uses Dreamweaver to create image map "hot spots" explained later.
- A basic understanding of HTML.
STEPS for Creating an Interactive Map
Step 1 - Setup your web page directory / file structure if you don't already have a website:
a) Create a folder on your desktop called MyWebSite. Inside this folder create another folder and call it Images.
b) Get a U.S. map image file and save it to your images folder. You should give your map a simple name like us_map.gif
c) Open your HTML editor and create an HTML document (or a template you already created) and save it inside your MyWebSite folder as map.html. See the examples below.
The United States map being used here shows 1/2 grayed-out. We will focus only on a few blue-colored states for example purposes. Note: You can get U.S. maps in various colors with any degree of customization from HitGuru. The maps come with the HTML code already created and ready to use. You can also download the Photoshop file if you want to create some really original designs to match your template or company identity. |
MyWebSite is a folder created that contains an html file named "map" and a directory called images. The images directory is where the map image us_map.gif is contained. |
Step 3 - Decide where you want to place the map image inside your web page. For this example we will keep this simple and insert the map without any additional steps like placing it inside a table or using DIV/CSS to define exact location on the page. Steps to insert the image in Dreamweaver are explained below:
a) On the upper tabbed panel Common click the insert image icon. You may be prompted to insert ALT attribute text to describe the purpose of the image. For this example type in "My Company Services Locator" or whatever you want. You can change this later.
Example showing the insert image icon in Dreamweaver. |
b) Browse to the MyWebSite/images folder to select the us_map.gif - This will place the map in the upper-left of your web page. In the source code view it will look like this: <img src="images/us_map.gif" alt="My Company Services Locator" width="450" height="288" />
c) Save changes before moving to step 4.
| Below is static information that won't be drawn from any database. It will be manually created typed into Dreamweaver. It will use empty anchor points indicated by the red X areas below. | ||||||||||
| X FLORIDA
X GEORGIA etc. |
Step 5 - As described in the previous step, we will use a simple empty anchor point approach to display static information for the purposes of this article. Empty anchor points are invisible points that mark content so that when referred to by a normal link (one of the linked states you will create in step #6), the user is delivered to that location within the web page. In the source view they look like <a name="florida"></a> . The red x areas in the example to the right would mark where you would place your empty anchor points but inside the source view. Click here to download the starting template .txt file you can use by copy/pasting the code just below your map image. It should appear similar to the example below once you are done.
Go To Next page: Step 6 >> Make U.S.A. Map "Hotspots" for Your Interactive Map >>