diff --git a/index.html b/index.html index f24e1ae..3326f0a 100644 --- a/index.html +++ b/index.html @@ -2,68 +2,43 @@ - Brief Toronto Tour - - + History of Sailing in Toronto + + - - - - - +
+ +
+ + +

+
+
+
+
- - - - diff --git a/script.js b/script.js index f45cf3d..b88a84d 100644 --- a/script.js +++ b/script.js @@ -1,26 +1,18 @@ -// initialize the variables we need -// we do this here to make sure we can access them -// whenever we need to -- they have 'global scope' + var my_map; // this will hold the map var my_map_options; // this will hold the options we'll use to create the map -var my_center = new google.maps.LatLng(41.9000,12.5000); // center of map +var my_center = new google.maps.LatLng(43.6344998,-79.3805541); // center of map var my_markers = []; // we use this in the main loop below to hold the markers -// this one is strange. In google maps, there is usually only one -// infowindow -- its content and position change when you click on a -// marker var infowindow = new google.maps.InfoWindow({content: ""}); var legendHTML = ""; -// I'm complicating things a bit with this next set of variables, which will help us -// with marker colors + var blueURL = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"; var redURL = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"; var red_markers = []; var blue_markers = []; -/* a function that will run when the page loads. It creates the map - and the initial marker. If you want to create more markers, do it here. */ function initialize() { my_map_options = { center: my_center, // to change this value, change my_center above @@ -28,30 +20,45 @@ function initialize() { mapTypeId: google.maps.MapTypeId.HYBRID // you can also use TERRAIN, STREETMAP, SATELLITE }; - // this one line creates the actual map my_map = new google.maps.Map(document.getElementById("map_canvas"), my_map_options); - // this is an *array* that holds all the marker info var all_my_markers = - [{position: new google.maps.LatLng(41.9000,12.5000), + [{position: new google.maps.LatLng(43.6254364,-79.3693453), map: my_map, - icon: blueURL, // this sets the image that represents the marker in the map to the one - // located at the URL which is given by the variable blueURL, see above + icon: blueURL, title: "first Marker", - window_content: "

Marker1

and this would be the extended description

" + window_content: "

Royal Canadian Yacht Club

Founded in 1852, with deep colonial ties and prestige.

" }, - {position: new google.maps.LatLng(41.8902,12.4923), + {position: new google.maps.LatLng(43.633325,-79.4003356), map: my_map, - icon: blueURL, // this sets the image that represents the marker in the map + icon: blueURL, title: "second Marker", - window_content: "

Marker2

and this would be the extended description

" + window_content: "

National Yacht Club

Founded in 1894 at the Queens Quay Wharf.

" }, - {position: new google.maps.LatLng(41.8986,12.4768), + {position: new google.maps.LatLng(43.6353243,-79.4010072), map: my_map, - icon: redURL, // this sets the image that represents the marker in the map + icon: redURL, title: "third Marker", - window_content: "

Marker3

and this would be the extended description

" - } + window_content: "

Queens Quay Wharf

AKA Aquatics Club Reservation. Location of NYC in 1904 and AYC in 1919.

" + }, + {position: new google.maps.LatLng(43.6329744,-79.4005928), + map: my_map, + icon: redURL, + title: "fourth Marker", + window_content: "

Alexandia Yacht Club

Founded in 1906.

" + }, + {position: new google.maps.LatLng(43.639026,-79.348815), + map: my_map, + icon: blueURL, + title: "fifth Marker", + window_content:"

Original Location of AYC

Previously known as Fisherman's Island, now a park of Cherry Beach." + }, + {position: new google.maps.LatLng(43.6439459,-79.3909462), + map: my_map, + icon: redURL, + title: "sixth Marker", + window_content:"

Original Shoreline of Toronto

Past this point is man-made shore." + } ]; for (j = 0; j < all_my_markers.length; j++) { @@ -85,24 +92,19 @@ function initialize() { } -// this hides all markers in the array -// passed to it, by attaching them to -// an empty object (instead of a real map) + function hideMarkers (marker_array) { for (var j in marker_array) { marker_array[j].marker.setMap(null); } } -// by contrast, this attaches all the markers to -// a real map object, so they reappear + function showMarkers (marker_array, map) { for (var j in marker_array) { marker_array[j].marker.setMap(map); } } -// I added this for fun. It allows you to trigger the infowindow -// form outside the map. function locateMarker (marker) { console.log(marker); my_map.panTo(marker.marker.position); diff --git a/style.css b/style.css index a9552ec..aedd1b2 100644 --- a/style.css +++ b/style.css @@ -1,74 +1,43 @@ -/* This is a very simple CSS setup that shows the size of the relevant divs and -- important! -- sets the size of the map container */ -/* add any styling for the central column here */ div.container { } div#mapcontainer { - font-family:Arial, sans-serif; - font-size:11px; + font-family: sans-serif; + font-size:12px; border:6px double #5E5C63; } -/* you can change the size of the map here if you want - you can even use percentages instead of pixels. - We let the width be set by the containing element, - but constrain the height -*/ div#map_canvas { - height:450px; -} - -/* this is the legend div. Can you make it into a right sidebar? you may -have to add some extra css to the mapcontainer div */ -div#map_legend { - -} - -/* if you want, you can make the text in the legend less ugly by adding -extra css classes */ -div#map_legend h1, div#map_legend h3 { + height:350px; } -// make it obvious that the legend text is clickable -div.pointer { - cursor:pointer +button.glow-button:hover { + color: #C9EFF2; + box-shadow: 0 5px 15px rgba(145, 92, 182, .4); } -/*just for fun, we can style the buttons using classes - button.rounded means "all buttons with the class of - rounded". button#hide meands "the button with the - id of hide" -*/ -button.rounded { - -webkit-border-radius:5px; - -moz-border-radius:5px; - border-radius:5px; - border: 1px black solid; -} -button#hide { - background:orange; +button#glow-button { + background:#87aeb2 +; + border: 2px solid; + border-radius: 12px 25px 11px; + } -button#show { - background:green; +button#glow-button2 { + background:#658D91; + border: 2px solid; + border-radius: 12px 25px 11px; + } -/* use these last three to style the text inside the - infowindows. They are pretty ugly at the moment, - consider making them prettier. - -*/ - div#map_canvas h1 { - -} - -div.address { - -} - -div.description { - +font-family: Times, sans-serif; +color: #658D91; +font-size:25px; + border: 2px solid; + border-radius: 12px; + padding: 1px; }