Help:Adding Media/Google Maps

From Kumu Wiki - TRU
Jump to navigation Jump to search
Please note: Google Maps that are added to a Kumu Wiki page currently have issues/problems when that wiki page is embedded or published to WordPress.

Maps are a great way to present information and on the Kumu Wiki, you can use the google maps tag to add annotated maps to your wiki article.

Building a Map

Google maps start with the code <googlemap> and ends with </googlemap>. You must then enter the main coordinates which are the center of your map:

  • lat="the latitude of the center point of your map"
  • lon="the longitude of the center point of your map"

Thus, a very basic google map of TRU would use the following code:

<googlemap lat="50.673516" lon="-120.367716"></googlemap>

Adding Placemarks

Any coordinates for placemarks on your map need to go between the two basic <googlemaps> start and end tags, in the format "latitude,longitude,label". So for example, the TRU House of Learning (HOL) is at the latitude of 50.671981 and the longitude of -120.365256. Thus, to create a map of the TRU campus with the HOL labeled, you would use the following code:

<googlemap lat="50.673516" lon="-120.367716">
50.671981, -120.365256, House of Learning
</googlemap>

You can add as many placemarks as you wish between the <googlemaps> tags. Each one should be on its own line.

Additional Parameters

You can add additional parameters to your google map, for example to change the size or type of map displayed. Here is a list of additional parameters:

  • width = the width of the displayed map in pixels; the default is 740.
  • height = the height of the displayed map in pixels; default is 600.
  • zoom = the zoom level of the map; 0 is the furthest away, 21 is the closest in
  • type = the type of map displayed. Values are either "map", "hybrid", or "satellite"; default is "hybrid"
  • controls = the type of controls displayed on the map. The values are either "small", "medium", "large" or "none"; "small" creates +/- zoom buttons, "medium" has zoom buttons and pan buttons, "large" has pan buttons with a sliding scale for zoom, and "none" has no buttons.
  • selector = shows the map/hybrid/satellite selector. Values are yes (default) and no.

Examples

Often, the easiest way to build a google map on a wiki page is to look at the code of already built maps and modify them with your own coordinates and/or parameters. Below are a couple examples of maps along with their code.

Wiki Code Display
Here is a simple map of TRU with the House of Learning labeled:

<googlemap lat="50.673516" lon="-120.367716">
50.671981, -120.365256, House of Learning
</googlemap>

<googlemap lat="50.673516" lon="-120.367716">

50.671981, -120.365256, House of Learning </googlemap>

Here is a complex map with a variety of coffee shops labeled. Additionally, the size, type, zoom, and controls

have all been modified using parameters:

<googlemap lat="49.265284" lon="-123.25407" zoom="15" height="600" width="600" controls="large" type="map">
49.265981,-123.246431, The Boulevard Coffee Roasting Co.
49.266568, -123.243764, Blenz Coffee
5784 University Boulevard
49.265766, -123.242651, Starbucks Coffee Co
5761 Dalhousie Road
49.261393, -123.246754, Starbucks Coffee Co
6190 Agronomy Road
49.260258, -123.248888, Tim Hortons - Vancouver
2424 Main Mall
</googlemap>

<googlemap version="0.9" lat="49.265284" lon="-123.25407" zoom="15" height="600" width="600" controls="large" type="map">

49.265981,-123.246431, The Boulevard Coffee Roasting Co.
5970 Univeristy Boulevard
49.266568, -123.243764, Blenz Coffee
5784 University Boulevard
49.265766, -123.242651, Starbucks Coffee Co
5761 Dalhousie Road
49.261393, -123.246754, Starbucks Coffee Co
6190 Agronomy Road
49.260258, -123.248888, Tim Hortons - Vancouver
2424 Main Mall
</googlemap>

Finding the Latitude and Longitude

The easiest way to find coordinates is using a geocoder such as http://www.infosports.com/m/map.htm or http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php. Other resources can be found by searching for "free geocode" on Google or another search engine.

See Also


First draft of this page derived from: http://wiki.ubc.ca/UBC_Wiki:FAQs