From the Ground Up

Welcome to Part 3 of my Google Maps API implementation. In my last post I explained how to implement the ability to save and load a set of data points via a JSON string on top of the Google Maps API as a set of markers and a polyline, and how to perform Dijkstra’s Shortest Path Algorithm with the resulting graph to create a point to point path for an indexed university.

When making the move from binghamtonumaps.com to yourniversitymaps.com I realized that a more automated process was needed when indexing a new campus. In addition to the automated process, I needed to clean up the polyline to accurately reflect the connections between markers on the map.

The first step in automating the process was to create various markers for each step of the process. To allow the user to differentiate markers, buildings are designated with purple markers, entrances/exits with blue markers and walkways with red markers. Furthermore, when connecting the points, the first marker selected is changed to a white marker to allow the user to visualize which marker has been selected.

The polyline has been corrected by using an array to store the coordinates, rather than dumping each longitude and latitude point into an ever-growing list of poly-coordinates. This allows the user to accurately see the connections that have been made, even when returning to the site after a period of being away.

Unfortunately, due to the continued development of youruniversitymaps.com, I will not be posting to the code that was developed to implement the automation of the indexing process. The code is a combination of php to query the database that stores much of the information, specifically the progress, javascript to handle the listeners that allow the placement of markers on the map, and AJAX to query an additional php script to load the coordinates that have already been placed by the user and saved on the server. Obviously, HTML and CSS are used to handle the rendering of the page and ensure a clean display for the user.

One function that I will explain that is used across all of the pages on youruniversitymaps.com is the resizing of the content to always fit within the available display window. In the development of the site, I came to the conclusion that I never wanted to see a scrollbar present on the site. This meant that whether the site was being on a 27″ monitor or a 10″ netbook, the content needed to be resized to properly fit the window. By utilizing the ‘viewport’ property of the browser, I was able to determine the size of the screen and adjust these values to find the necessary height and width of the various elements. For the implementation on youruniversitymaps.com, the only variables that needed to be changed were the height of both the sidebar and map. Additionally, the margin-top of the map element needed to be modified as the sidebar height was changed. Below you’ll find the function that handles the resizing of the page. In addition to calling the function when the page is loaded (via the onload method of the body tag), the function is called whenever the page size is modified.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(window).resize(function() {
  setHeight();
});
 
function setHeight() {
  var viewportwidth; var viewportheight;
 
  if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth; viewportheight = window.innerHeight;
  } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth; viewportheight = document.documentElement.clientHeight;
  } else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth; viewportheight = document.getElementsByTagName('body')[0].clientHeight;
  }
 
  var sbH = viewportheight;
  var mcH = viewportheight;
  var mcT = 0;
  if ($('.browserChrome')[0]) {
    sbH -= 106; mcH -= 106; mcT = 96 - viewportheight;
  } else if ($('.browserFirefox')[0]) {
    sbH -= 104; mcH -= 100; mcT = 78 - viewportheight;
  } else if ($('.browserSafari')[0]) {
    sbH -= 115; mcH -= 117; mcT = 87 - viewportheight;
  }
  $('#leftSidebar').css('height', sbH);
  $('#map_canvas').css('height', mcH);
  $('#map_canvas').css('margin-top', mcT);
}

This code requires the jQuery plugin to be included on the page in order to properly set the appropriate css elements in the last few lines of code. If you want to use this in a project of your own, you will most likely need to modify the if statements to subtract the necessary values. While implementing this code on youruniversitymaps.com, I calculated the total space that my header and footer occupied, and then subtracted that from the viewportheight as appropriate.

If you’ve found these last few posts interesting and want to get involved with youruniversitymaps.com, please head over to the site and click on the link in the left sidebar. You will be presented with a contact form that will allow you to sign up to index your own school. Once you’ve been approved to index your school, you will get to witness first hand the automated process that was developed to streamline the indexing process, and you can brag to your friends about how you’ve made their lives easier in helping everyone at your school get across campus. As always, any comments or questions, please leave a message below. Additionally, if you’ve found any of these Google Maps API posts informative, please help spread them via stumbleupon/twitter/redit/etc.