Adding an Interactive Map to your Site

The new mapping component is one of the most exciting new features we've added in a while.  There's so many applications for this little tool that there's no way we can cover them in one short article; but once you've got to grips with it why not post some links to show off your work?

In the meantime here's a tutorial on how to use a mapping component for some of the most common applications.

The Basics
There's two ways of adding a map to your site; if you'd like to just add a map to your article there's the new add component button in the article editor.  If you're working on a more complex layout - like your web site homepage there's a new map component in the layout editor.  Both methods work in pretty much the same way - we'll be using both in these tutorials.
Pinpointing your organization
  • Open the article where you will be adding the map; the contact us page is probably a good place.
  • Place your cursor at the appropriate location in the article then click the new add component button, and select the map component.
  • The component will be added to your article and there'll be a new window to allow you to change the map settings.
    • Change the Component Settings to set who can see this map, adjust the margin around the component and toggle the component title and footer bars.
    • Change the Map options to select which map controls are available.  "Where's my nearest" allows users to enter a city name or Post/Zip Code to locate the nearest pin if there's multiple pins displayed.
    • Display location sets the location and zoom level for the map when its loaded for the first time.  Click the Choose button to locate a region and zoom level to display.  You can always adjust the scale option afterwards and press the preview  button to see the effect.
  • Finally add the marker for where your church is located.  Use the fixed point option in this instance and click add.  A new marker will be added to the list but with no location set.
  • Enter the title for your marker and a description if required.  You can also select a letter, A-Z, to be added to the marker itself.
  • Click the edit button to add your pin to the map; a good tip is to enter a Post/Zip Code into the search box, then switch to aerial view and click on the map to improve the position of the pin if needed.  Click the OK button once your pin is in the correct place. 
  • Repeat the process to add further pins if required.
  • Finally, use the Preview button to check your map settings before clicking OK to close the component settings window.
Here's an example; this map shows the location of the UK Endis office:


Showing Event Locations
Another example of how you could put the mapping component to use is to plot the location of your small group meetings on a map.  Although we could add this map to an article we'll use the themes & layouts area in this instance:
  • Go to the Settings area of the web office and choose the themes & layouts section.
  • Choose the group where your new map component will make up part of the page layout.
  • If this group already has a layout assigned click the edit button, otherwise click the change button to begin creating a layout.
  • Add a Map component to the appropriate table cell of your layout.  In IE this is done by dragging the component from the component list, in Firefox this is done by selecting a table cell first then clicking on the map component.
  • Double-click the new component to open the properties window.
  • The options available are identical to the example given above, however in this instance select the group events option in the markers area and click add.
  • Click the edit  button to select the group where your events are stored; you may also want to check the include child groups option if some of the events are stored in sub-groups.
  • Use the preview button to check your map settings before clicking OK to confirm your choices.  You may also want to use the layout preview button to check how your map works alongside the components in your layout.  Note: it'll take a little while to plot all the locations onto a map so you may want to test your new layout a little later.
  • Finally, save your layout.
By way of example, this map shows just some of the UK organizations using Endis (using the organization directory option in the map component) and allows you to find the closest one to you!