University Marketing & Communications

January 2, 2013

Embed the Campus Map into a WordPress page or post

By University of Washington

On this page:


Overview

Did you know that you can embed a smaller version of the Campus Map right into your UW Theme WordPress site? This map is interactive and will even let users find directions from any point on campus (or a specified address) straight to your building or parking lot.

Below is an example embedded directly onto this page:

http://uw.edu/maps/?hag


Embed a map centered on a campus building or landmark

  1. Open the Campus Map site in your web browser.
  2. Find the building or landmark that you wish to be the center of focus on your map.
  3. Hover your mouse over the building or landmark until you see an opaque circle.
    • Embed Campus Map: Hover your mouse over the building or landmark
  4. Click on the opaque circle that is over your desired building or landmark to open an info box. (See image for Step 5.)
  5. Copy the Share link located on the right-hand side of the info box.
    • Embed Campus Map: Copy share link
      Click image to enlarge.
  6. From your WordPress CMS, edit the page or post on your site where you want to embed your Campus Map.
  7. Paste the Share link directly into the post editor (you can paste the link using either the Visual or HTML editor).
    • Embed Campus Map: Paste the share link
      Click image to enlarge.
    • Note: Your embedded map will always display as the share link whenever you edit your page or post.
  8. Publish or save the changes you made to your page or post. The embedded map will now appear when you view your live page or post.
    • Embed Campus Map: Map on page
      Click image to enlarge.

Embed a map centered on a campus parking lot

  1. Open the Campus Map site in your web browser.
  2. Check the Parking Lots checkbox in the right-hand menu.
    • Embed Campus Map: Check Parking Lots checkbox
  3. All parking lots on the map will now be highlighted by red overlays.
    • Embed Campus Map: Parking Lots overlay
      Click image to enlarge.
  4. Find the parking lot that you wish to be the center of focus on your map and click on the lot to open an info box.
    • Embed Campus Map: Parking lot info box
      Click image to enlarge.
  5. Copy the Share link located on the right-hand side of the info box.
    • Embed Campus Map: Copy share link
      Click image to enlarge.
  6. From your WordPress CMS, edit the page or post on your site where you want to embed your Campus Map.
  7. Paste the Share link directly into the post editor (you can paste the link directly into either the Visual or HTML editor).
    • Embed Campus Map: Paste the share link
      Click image to enlarge.
    • Note: Your embedded map will always display as the share link whenever you edit your page or post.
  8. Publish or save the changes you made to your page or post. The embedded map will now appear when you view your live page or post.
    • Embed Campus Map: Map on page
      Click image to enlarge.

Customize embedded map dimensions

When embedding the Campus Map into your UW Theme WordPress site, the default size is set to fill the width of your main content area. However, you may customize the map dimensions by setting either a percentage or specific pixel attribute at the end of the building, landmark, or parking lot share link. (To find the share link follow steps 1-5 for a campus building or landmark, or steps 1-5 for a campus parking lot.)

When resizing your embedded map, the share link pattern is as follows:
http://uw.edu/maps/?building,width,height

The below examples will all use the share link for Kane Hall (http://uw.edu/maps/?kne).

Example 1: Map Dimensions Using Pixels

To customize the Kane Hall map size to 300 pixels wide and 400 pixels high, the share link would be written as: http://uw.edu/maps/?kne,300,400.

Note: You may notice that you only need to write out the map dimensions without designating them as pixels. This is the default setting. You may also write out the above link as follows: http://uw.edu/maps/?kne,300px,400px

Here is how the above 300px X 400px map displays:

http://uw.edu/maps/?kne,300,400

Example 2: Map Dimensions Using Percentages

For this example, we will designate the embedded Kane Hall map dimensions using a percentage of the default width (see embedded map in the Overview section as an example of the default size). The height may only be changed using pixels (see Example 3 below).

To customize the map size as 50% smaller than the default width, the share link would be written as: http://uw.edu/maps/?kne,50%.

Here is how the above Kane Hall map displays:

http://uw.edu/maps/?kne,50%

Example 3: Map Dimensions Using a Mix of Pixels and Percentages

Should you want to customize the map dimensions using both a percentage width and a specific pixel height, you may do so using this pattern: http://uw.edu/maps/?building,%,pixels.

For example, to change the Kane Hall map size to 60% of the default width and 600 pixels high, the share link would be written as: http://uw.edu/maps/?kne,60%,600.

Here is how the above Kane Hall map displays:

http://uw.edu/maps/?kne,60%,600