Help:Adding Media/Google Maps
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 UBC would use the following code:
<googlemap lat="50.671981" lon="-120.365256"></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 UBC student union building (SUB) is at the latitude of 49.267185 and the longitude of -123.250508. Thus, to create a map of the UBC Vancouver campus with the SUB labeled, you would use the following code:
<googlemap lat="49.265284" lon="-123.25407"> 49.267185, -123.250508, Student Union Building </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. You can also look at the maps in the UBC Maps Category.
| Wiki Code | Display |
|---|---|
| Here is a simple map of UBC with the Student Union Building labeled:
<googlemap lat="49.265284" lon="-123.25407"> |
<googlemap lat="49.265284" lon="-123.25407">
49.267185, -123.250508, Student Union Building </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 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