Creating a Map in Tridion

In addition to including standard text directions, you can add Google maps to your page via Tridion. 

• Google maps have been integrated with the Faculty Profile System to enable YSM websites to easily create maps using data stored in the profile system.

Website editors can create a map with a single location or the locations associated with an organization from the Faculty Profile System.

The following instructions provide information on how to use organization information from the Profile System to create Google maps and insert them onto a page via Tridion.

Table of Contents

Creating the GoogleMap Component

The first step in adding a Google Map to your page via Tridion is creating a GoogleMap component.

Open

In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.

You will be taken to a new page for creating the component (shown below):

Open

1. Enter an appropriate Name for your component.

2. Choose GoogleMap from the Schema drop down menu (highlighted in yellow above).

3. Title: What is entered in this field will display above the map on the page.

4. ID for locations displayed on map: Insert the Organization ID or Building ID in this field.

   • Enter the appropriate 6-digit Organization ID if you want to show all locations associated with a specific organization.

     • You can find an Organization ID in the profile system.

       • Click on the Organizations tab in the top navigation.

       • Find the organization in the list or use the Filter field to narrow the list.

       • Click the pencil/edit icon to the right of the organization.

       • You can find the ID under Organization ID in the top-right corner of the Information section.

   • Enter the appropriate Building ID for a location if you want to show just one specific location.

     • A complete list of Building IDs can be found here: List of Building IDs For Maps

5. Feed type: Select the radio button next to the appropriate option based on the type of ID you entered in the last field.

   • Select Location if you entered a Building ID (one specific location).

   • Select Organization if you entered an Organization ID (all locations for an organization).

When you are satisfied with your information, Save and Close the component (highlighted in blue above), and you are ready to add it to a page.

Adding the GoogleMap Component to a Page

After creating the GoogleMap component, you can add the component to a page.

1. Navigate in the Root folder to the page you'd like to add a Map to and double-click to open the page.

2. In the window that opens, click the Component Presentations tab.

3. Click Insert at the bottom left of the page window.

4. Browse to the GoogleMap component you created and click to select it.

5. From the Component Template dropdown, select one of the following templates (examples for both can be found later in these instructions):

   • Google Map: Select this template if you want the map to display the locations associated with the Organization ID in the Profile System.

   • Google Map: Department Locations: Select this template if you want the map to display the organization’s locations and the locations of the department’s sub-organizations in the Profile System.

     • This template is only relevant if you used an Organization ID when creating the component.

6. Click the Insert button at the bottom right, then the Close button.

7. Save and Close the page, then you are ready to publish.

Examples of the Google Map Template on a Page

The screenshots below show an example of a Google Map template, as it appears on a website.

Organization ID

There are a few things to notice about the Google Map template.

1. The Title appears above the map (highlighted in yellow above).

2. This example uses an Organization ID, so the map shows the multiple locations associated with the organization in the Profile System.

   • The locations are listed to the right of the map (highlighted in green above).

   • They are also shown with blue markers on the map itself (highlighted in blue above).

If you click on a location in the list on the right (green above), the map will change to look like the screenshot below:

There will be a few changes to notice in the above screenshot.

1. The location will become the only one in the list on the right and will show some more details (highlighted in blue above).

2. The location’s corresponding marker on the map will turn from blue to red (highlighted in red above).

3. The Get Directions button (highlighted in green above) will appear, which you can click on to be taken off the page to the full version of Google Maps, which will be populated with the address of the location, if you want directions to it.

4. You can click Back to All Locations to be taken back to the full Map and List of Locations.

From the full map, if you click directly on one of the markers, the map will change to look like the screenshot below:

All of the same changes that happen when you click on a location from the list will happen when you click the marker.

• The only difference is clicking on the marker brings up a pop up that tells you which location the marker corresponds to and shows the location’s details.

Building ID

If you used a Building ID and selected Location in the Feed type field when creating a component, your map will show only the location associated with the Building ID (shown below).

The map will look like the Organization ID Map does when a location is selected (shown earlier in these instructions).

Examples of the Google Map: Department Locations Template on a Page

The screenshots below show an example of the Google Map: Department Locations template, as it appears on a website.

The Google Map: Department Locations template is the same thing as a regular Google Map template (see previous section for an example), except it includes all the locations of a department’s sub-organizations and has search and filter functionality on the map.

• You can filter the locations displayed in the menu by keyword with the search bar (highlighted in yellow above).

• You can also choose to view All Locations or New Haven Only locations in the list and the map with the tabs above the list (highlighted in blue above).