Adding Google Maps to
Your College Website

Additional JavaScript

Getting to the Dickinson College campus:

	From the East/West via PA Turnpike (Philadelphia, Pittsburgh)
	From the North via I-81 (New York, New England)
	From the South (Washington, Baltimore)
	From the Southwest via I-81 (Virginia)

var dirA = "A. From the East or West From the Pennsylvania Turnpike...";
var dirB = "B. From the North Travelling south on I-81...";
var dirC = "C. From the South Take US-15 north...";
var dirD = "D. From the Southwest Travelling north on I-81...";
var mapkey = "Getting to the Dickinson College campus: ...";
var backlink = "<a href='#' onClick='showKey()'>Back to Map Key</a>";
var boxtext = "Dickinson College P.O. Box 1773 Carlisle, PA 17013-2896...";

// Initialize map

var map = new GMap2(document.getElementById("locmap"));
map.setCenter(new GLatLng(40.210, -77.196231), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// Create marker for campus

var point = new GLatLng(40.2022591, -77.1966629);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(boxtext);});
map.addOverlay(marker);

// Function to restore map key

function showKey () {
	map.closeInfoWindow();
	clearLines();
	document.getElementById("mapdir").innerHTML = mapkey;
	}

// Define our icons

var baseIcon = new GIcon();
baseIcon.shadow = "http://www.dickinson.edu/about/maps/images/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Function to create markers. Pass parameters for map point, key letter, directions and polyline

function createMarker(point, letter, dir, mapline) {
	var icon = new GIcon(baseIcon);
	icon.image = "http://www.dickinson.edu/about/maps/images/marker" + letter + ".png";
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click", function() {clearLines(); map.addOverlay(mapline); marker.showMapBlowup(15); document.getElementById("mapdir").innerHTML = dir + backlink;});
	return marker;
	}

// Define polylines for directions, create markers and add overlay

var point = new GLatLng(40.22907074856293, -77.15108156204223);
var lineA = [];
lineA.push(new GLatLng(40.229463921551655, -77.14940786361694));
lineA.push(new GLatLng(40.228726720325554, -77.14893579483032));
lineA.push(new GLatLng(40.2100646664581, -77.18320369720459));
lineA.push(new GLatLng(40.20544341677743, -77.18856811523437));
lineA.push(new GLatLng(40.201493801231436, -77.18914747238159));
lineA.push(new GLatLng(40.20214935500793, -77.19642162322998));
var maplineA = new GPolyline(lineA, "#660000", 4);
var markerA = createMarker(point, "A", dirA, maplineA);
map.addOverlay(markerA);

var point = new GLatLng(40.1994324, -77.1592941);
var lineB = [];
lineB.push(new GLatLng(40.20083824111607, -77.15831279754638));
lineB.push(new GLatLng(40.199232092043935, -77.15998649597168));
lineB.push(new GLatLng(40.20077268475588, -77.17921257019043));
lineB.push(new GLatLng(40.20224768752768, -77.1963357925415));
var maplineB = new GPolyline(lineB, "#660000", 4);
var markerB = createMarker(point, "B", dirB, maplineB);
map.addOverlay(markerB);

var point = new GLatLng(40.1883087, -77.1912155);
var lineC = [];
lineC.push(new GLatLng(40.18725033072772, -77.19127178192138));
lineC.push(new GLatLng(40.20159213470201, -77.18912601470947));
lineC.push(new GLatLng(40.20214935500793, -77.19646453857422));
var maplineC = new GPolyline(lineC, "#660000", 4);
var markerC = createMarker(point, "C", dirC, maplineC);
map.addOverlay(markerC);

var point = new GLatLng(40.1871948, -77.2084045);
var lineD = [];
lineD.push(new GLatLng(40.18693887505295, -77.21154928207397));
lineD.push(new GLatLng(40.186709380482796, -77.2088885307312));
lineD.push(new GLatLng(40.1940528216067, -77.19753742218017));
lineD.push(new GLatLng(40.202182132530375, -77.19659328460693));
var maplineD = new GPolyline(lineD, "#660000", 4);
var markerD = createMarker(point, "D", dirD, maplineD);
map.addOverlay(markerD);

// Function to clear lines from map

function clearLines () {
	map.removeOverlay(maplineA);
	map.removeOverlay(maplineB);
	map.removeOverlay(maplineC);
	map.removeOverlay(maplineD);
	}

// Function to display directions

function getDir (mapmarker, dirtext, mapline) {
	clearLines();
	map.addOverlay(mapline);
	mapmarker.showMapBlowup(15); 
	document.getElementById("mapdir").innerHTML = dirtext + backlink;
	}

</script>

Adding Google Maps to Your College Website

Additional JavaScript

Adding Google Maps to
Your College Website