Using the map.

These pages make use of the Map system from Google and their JavaScript API.

I have implemented a system where the visitor can create their own category which starts with a map centred on the location of their choice. They can also specify the type of map to use and the magnification/zoom level. They can then add map pins to the map. Each pin also has a label associated with it that appears in the right hand column and acts as a named label/link to the info window. Clicking on the map pin or its associated label will check the position of the map and open an info window for the location. This info window can contain a header, some text and a link to another web page. The web paged link will open in another browser window.

Viewing a category

The system begins with the Miscellaneous map with it's own pins and labels.

Clicking on a pin will open its info window which will give further details about the location. The info window can also contain a link to another web page.

Each pin on the map also has a label in the 'Items' section to the right of the map. Clicking on this label opens the associated info window pointing to the marker pin. If the label referrs to a pin that is not displayed in the current map view then the map will scroll until the pin is within the displayed map and then display the info window.

Scrolling

There are 4 ways of moving about the maps, but it depends on which type of map you are viewing.

• Drag the map. Applies to all maps.
• Click anywhere on the map, and with the mouse button still pressed, drag that point of the map to another location on the screen.
• Double click on a point. Applies to all maps.
• Double click on any visible point on the map and that point will be moved to the centre of the map
• Click on an item in the right-hand list. Applies to the category item map only.
• There may be markers associated with the map that do not fit within the current visible window. There will be a reference to the marker in the item list in the right-hand pane. Clicking on this item will move the map until the marker is in a visible section of the map and then display the infomation window associated with that marker.
• Single click on a point. Applies to the add category and add marker maps.
• When using the maps for adding a new category or a new marker the map can be centred on a point by a single click on the map point. The longitude and latitude of the map centre are then displayed and will be used as the location for the centre of the category map or the location of the marker.

Changing the scale

The scale of the map can be changed by using the slider control on the left of the map.

• Clicking on the + sign will zoom in.
• Clicking on the - sign will zoom out.
• You can also click on a particular zoom line.

Changing the category displayed.

The column to the right of the map contains details of the category being displayed. At the top of this section is a drop-down selection list of the available categories. Clicking on the down arrow to the right of the current selection will display a window containing the available category names. Select one of the categories and release the mouse button. The selected category, its map, pointers and labels will then be displayed.

Adding a new category

If a suitable category does not exist for the map and markers that you would like to see then a new category can be created.

Click on the 'New Category' button to open a default map. Move the map around (zoom in if neccessary) and click on the point that is to be the centre of the map associated with the new category. Once you have clicked on the map the text boxes will appear for you to enter details of the category. Please note that for security reasons the text that can be entered is limited to alphanumeric, + and -.

• Name
  The name of the category is what will appear in the drop-down category selection list - keep it short.
• Description
  The description is what will appear beneath the category selection.
• Map Type
  The map type can be one of 3 values - hybrid (a road map overlaying a satelite image), satellite (a satellite image of the area) or map (a simple road map).
• Zoom Level
  The Zoom Level currently has 5 options that represent Google zoom levels of 17 - Very close, 15 - Close, 13 - Reasonable, 11 - Distant and 9 - very distant.

I have not added any edit functions because of questions about who should be able to edit the details? Should only the creator of a category be allowed to edit the details? If 'Yes' then I will need to record who created the category. If you find that you would like the details changing - a different map centre, a different zoom level or different text then get in touch and I will make the changes for you. You can get in touch using this page.

Adding a new marker

When viewing a particular category map a visitor can add a new marker to the map and the item list.

Click on the 'New Marker' button to open an empty map that uses the centre, type and zoom level of the current category.

Move the map around (zoom in if neccessary) and click on the location for the new marker. Once you have clicked on the map the text boxes will appear for you to enter details of the marker. Please note that for security reasons the text that can be entered is limited to alphanumeric, + and -.

• Label
  This is the text that will appear in the right hand items column. Please keep it short so that the maximum number of items can be added.
• Headline
  This is the text that will appear in bold at the top of the pop-up info window.
• Text
  This is the text that will appear in the pop-up info window.
• Website Link
  Enter a link to another webpage. This should be the full link including the http:
  The link to another web page will also be checked for formatting and that the web page actually exists. If the link is for a web page of your own it is therefore necessary to create the web page before trying to create the marker.
• Link text
  This is the text that is to become the link to the web page. If a website link is entered in the box above then it is essential that some text is entered here.