Maps & Directions - Expression Web Add-In by Ajatix

The latest add-in from Ajatix, the Maps & Directions Expression Web add-in will let you place an interactive map (Bing or Google) on your webpages. Let your customers see where your offices are located and how to get there. Mark locations of anything related to your business: branches, retail stores, real estate for sale, places of interest, events, etc.

A live design-time preview displays the map exactly the way it will look like on your site and allows to enter locations simply by clicking on the map.

NOTE: The map may be sparse and not give very much information if you are working with a rural location such as our local church located on the outskirts of Harrisonburg or a local furniture store located in a small city.

Example Map

System requirements for Ajatix CSS Menu add-ins

• Microsoft Windows 8, 7, Vista, XP, 2000
• Microsoft Expression Web 4, 3(SP2), 2, 1
• Microsoft FrontPage 2003, 2002, 2000

Pricing & Downloads

Price:  $49.95

Buy Now: Maps and Directions Add-in

Download the Trial: Maps and Directions Add-in

Product Page: Maps and Directions Add-in

How to Use Maps & Directions

This tutorial was written using version 1.1.9.0 and inserting a Bing Map.

Note: You will need your own Bing Maps Key in order to work with Bing Maps. If you do not have the key, you can get one from Microsoft.

Once you have installed the add-in, you will find a new icon on the Ajatix toolbar and a new listing under the 'Insert' menu for Ajatix. Your trial will function for 15 days. To enter your Registration Information, click on Help from the menu within the program > Enter Product Key.

Figure 1: Ajatix Toolbar

Step One: To insert your map, place your cursor where you want the map to appear. If you have not saved your page, you will be prompted to do so BEFORE you can start. Click the Maps and Directions icon on the Ajatix toolbar OR go to Insert' > Ajatix > Maps and Directions. The Start Wizard dialog allows you to choose 'New' or 'New from existing style.' For the purpose of this tutorial, I selected New.

NOTE: Ajatix Maps & Directions is fully customizable, you will be able to change the map style any time later.

Step Two: Populate the Maps & Directions

• Your Maps & Directions can be used to display a map with way points or markers on it. Add markers (pushpins) to the map by clicking the Add icon or alt-clicking on the map. You can specify an exact address and OR latitude and longitude and, optionally, a title, a description and check on "Include in the route" if you want to route through this point for each entry. When specifying the location by alt-clicking the map, the address, latitude, and longitude are getting filled in automatically. You can change the address and coordinates by dragging the marker to a new location on the map.
  NOTE: for this tutorial, I used a local furniture store for whom I maintain the site.
  View Screenshot

Step 3: Customize the Maps & Directions style

• Customize your map design using the Style Editor by changing the map and directions options.
• The live preview window allows you to see what the map will look like as you edit it. Any change in style or content will be reflected in the preview window in 5 seconds. You can force the refresh of the preview window by clicking the refresh icon . You can turn off the auto refresh by unchecking the Auto Refresh box.

Step 4: Save the Maps & Directions style into a CSS file by selecting the Save command in the File menu. Alongside with the CSS file the add-in will generate and save a JavaScript file (.js) and a project file (.ajm). Select the location and the name of the CSS file and click the Save button. Click OK to finish editing and close the add-in. The add-in will insert the markup into the page.

Editing Maps & Directions Content

• Content Editor: View Screenshot
  • Adding Markers -  Use Add New Item, Remove Item, Move Item... buttons under the list of pushpins (markers) to add a new marker to the list, to remove them, and to rearrange them. You can also add a new marker by alt-clicking a desired location on the map. If the address and the coordinates of the marker are not filled in at the time of the click, they will be filled in based on the coordinates of the location clicked. If the current marker has at least one of the parameters filled in, a new marker will be created with parameters matching the location clicked.
  • Marker address - Specifies address of the pushpin to be displayed in the map.
  • Marker coordinates - Specifies the latitude and longitude.
  • Include in the route - Includes the marker into the route, thus making it a waypoint. The route is displayed when it includes two or more waypoints. The route is laid from the last waypoint in the list to the first one. The first waypoint in the list is the main one. If the end-user places his own marker on the map, the route will always be laid from his marker to the first waypoint in the list.
  • Info box defines the infobox data that will appear when the pushpin is clicked by the user. If the data is not filled in, no infobox will appear.
  • Open Info box - Turn on if you want the info box for the marker to open after the map is loaded. By default the info box does not appear automatically.
  • Live preview - Any change in the map data will cause a 5-second preview refresh countdown. Any editing during the countdown will restart it. Sometimes the constant automatic refresh of the preview window during editing can be unwanted. In that case the automatic refresh can be turned off by unchecking the Auto refresh box. You can refresh the map at any time by clicking the refresh icon .

Editing Maps & Directions Style

To customize style of your Maps & Directions switch to the Style Editor by clicking on the corresponding tab. In the Style Editor settings are arranged into 3 categories: General, Advanced, and Direction.

• General Setting: View Screenshot
  • API - Determines the map API provider. There are Microsoft Bing Maps API and Google Maps API.
  • Bing Maps Key -  To work with Microsoft Bing Maps you need a Bing Maps Key. If you do not have one you can get it from Microsoft. You can get to the site by clicking the key icon.
  • Language - Selects the language for the map and directions. Not all languages are fully supported. The language setting is global and affects all maps in the document.
  • Map Size - Determines the size with which the map will be displayed.
  • Width - Specifies the width of the map.
  • Height - Specifies the height of the map.
  • Map Type - Specifies the type of the map. One of four possible options can be selected. The available options depend on the API provider selected. These are Road, Auto, Aerial, and Birdseye for Bing API; and Road, Hybrid, Satellite, Terrain for Google API.
  • Zoom - Specifies the initial scale of the map. When a new marker is added with Alt+Click, the initial scale is set equal to the one in the preview.
  • Map border - Determines whether a border will be drawn around the map, the color and the width of the border.
  • Background color - The color of the Bing Map background. The background can be seen when the map had not enough time to be completely redrawn after being panned with the mouse.
  • Outer container border - Determines whether an outer border will be drawn, the color and the width of the border.
• Advanced Settings for Bing Map: View Screenshot
  • Disable keyboard input - Check on if you want to disable the map's response to keyboard input. The default state is off.
  • Disable mouse input - Check on if you want to disable the map's response to mouse input. The default state is off.
  • Disable touch input - Check on if you want to disable the map's response to touch input. The default state is off.
  • Disable user input - Check on if you want to disable the map's response to any user input. The default state is off.
  • Show Copyright - Check on if you want to show the map copyright. The default state is checked. Important: Bing Maps Platform API Terms of Use requires copyright information to be displayed. Only uncheck this option when copyright information is displayed through alternate means.
  • Show Dashboard - Check on if you want to show the map navigation control. The default state is checked.
  • Show Map Type Selector - Check on if you want to show the map type selector in the map navigation control. The default state is off.
  • Show Scalebar - Check on if you want to show the scale bar. The default state is checked.
  • Enable clickable Logo - Check on if you want to enable the Bing™ logo on the map is clickable. The default state is off.
  • Enable search Logo - Check on if you want to enable the Bing™ hovering search logo on the map. The default state is off.
  • Inertia - Check on if you want to use the inertia animation effect - during map navigation. The default state is checked.
  • Inertia intensity - A number between 0 and 100 is specifying the intensity of the inertia animation effect. The inertia effect increases as the intensity value gets larger. The default value is 85.
  • Show print button Website visitors can open a print-friendly page and print the map and route.

• Advanced Setting for Google Map
  • Disable keyboard input -  If checked on, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
  • Show Pan control - Check on if you want to show the Pan control. The default state is checked.
  • Show Map Type Selector -  Check on if you want to show the map type selector in the map navigation control. The default state is off.
  • Show Scalebar - Check on if you want to show the Scale control. The default state is checked.
  • Show Overview Map control - Check on if you want to show the Overview Map control. The default state is checked and Overview Map control is closed.
  • Show print button - Website visitors can open a print-friendly page and print the map and route.
• Direction Settings: View Screenshot
  • Travel mode - The mode of travel for the route. One of the following values: Driving (default), Walking, Transit.
  • Distance unit - The units to use for distance. One of the following values: Miles (default), Kilometers.
  • Route optimize - Specifies what parameters to use to optimize the route. One of the following values: Time (default), Distance.
  • Line color - Specifies the route line color.
  • Show Turn by Turn directions -  specifies whether to display the turn-by-turn directions to the right of the map. Default state is off.
  • Width - specifies width of the turn-by-turn directions area.
  • Border determines whether a border will be drawn, the color and the width of the border.
  • End user direction - Turn on the Allow end user to run his own route option if you want to let a site visitor run his own route from a place of his choice to the main marker. The main marker is the first one in the Content Editor list. A site visitor can place his own marker by ctrl-clicking the map or enter his own address into the form and run his own route.
  • Show hint -  Turn this option on to show the hint text for the user under the map. The hint text can contain HTML markup.
  • Show address form -  Turn this option on if you would like to let the user enter his own address to run a route.
  • Line color specifies the user's route line color.
  • Position specifies the position of the turn-by-turn directions area. There are Right and Below options available.
  • Width specifies width of the turn-by-turn directions area.
  • Height specifies height of the turn-by-turn directions area.
  • Border determines whether a border will be drawn, the color and the width of the border.
  • End user direction - Turn on the Allow end user to run his own route option if you want to let a site visitor run his own route from a place of his choice to the main marker. The main marker is the first one in the Content Editor list. A site visitor can place his own marker by ctrl-clicking the map or enter his own address into the form and run his own route.
  • Line color specifies the user's route line color.
  • Show hint Turn this option on to show the hint text for the user under the map. The hint text can contain HTML markup.
  • Show address form Turn this option on if you would like to let the user enter his own address to run a route. Address prompt The prompt text can contain HTML markup.
  • Button Sets the label of the submit button. Default value is "Get Directions".

Example Map which has the template for this site attached.