Pman's Lab

Everything went good so far. Didn't have much trouble getting the map show up on the page with Ryerson Campus by default. I had to get the geocode from GeoCoder.ca. Since the campus has so many buildings, I'll just create an xml document with their geocode and then load it in the map with markers.

Only created the xml file with the latitude and longitude information of all the buildings of the campus. But, I was discouraged to see that Ryerson already has a map with 1 level of zooming and somwhat dragging enabled map, which was made in flash. Well... I'll continue working on this and try to make it better. Next time I'll load the xml file and then add those markers on the map. That's it for now. Later...

Loading XML and then creating the markers at those points are done. I used Mike's example, but I'll be modifying it later. The way it works now is that it will add the markers right away after loading the xml. But I'll get rid of the markers and have the markers show up after the user clicks on the building names on the side. Also, I will set the clicked marker be at the center of the map.

Just finished modifying the markers so that they only appear when the user clicks on the name of the buildings. Had a little bit of trouble modifying it, but at least I didn't waste too much time compared to the other projects. I did have the map set to center where the marker is, but if I do that then I loose the smooth animation, which map api performs automatically if the marker is outside the map area. I commented that part now, but later may be I'll do my own set center function to get the smooth translation

The controls were added, but as I was playing around the map with the control, I realize that I should probably set the default zoom level to 17, which is now set to 16. Also, it appears that the zoom level changes between different types of map, for example, from Map type to Satellite Type.

That's done as well, without a lot of trouble. While at it, I also increased the initial zoom level to 17 when the page loads. It was a little painful to type the whole xml document, but it still works. Gotta think about what to do next.

Fortunately, there wasn't any trouble on this part and finished it rather quick. The campus.xml file has been divided into two different file as planned and both xml files are being loaded right now, but the building lists show up under proper category list. However, there are some building, whose category is hard to define, but I'll worry about those later since they can be changed at anytime by just placing their info in the appropriate xml file.

Spent a lot of time, but couldn't fix the main issues. I did fix the background matching issue and it wasn't because of object.classname; That was fine. I played with the css a lot, but can't find out where those gaps are coming from between the sidebar and the map area. Also, in IE, the bottom 4/5 pixels doesn't show up for some reason. This is one of the wierdest problem I've seen so far. Spent 3 hours and still couldn't fix everything in this issue. Arrggggggg.....

This took a long time to finish. But, it's not that hard anyways. The hardest part is to get you own custom map drawn in Illustrator or Photoshop, scaling the map for different levels of zoom and slicing it accordingly, well... at least for me since I'm not a graphics person. That was basically the main problem I was having. Besides, I also had to do some research on how to add a custom map and also study some source codes.

You might be wondering why it took me that long to collect the building informations. Well... as I was researching about building's information in the campus, I kinda got carried away a little further. At first I only wanted to show an image of the building and the address of that building in the info window. But later, I thought, it would probably be more useful, if I also showed the faculties or department's offices in that building. For example: Industrial Engineering and Chemical Engineering, both faculties are located in KHS building. So, I added that to the information list. A little later again, I thought why not also show an option to get a driving direction to/from this address? Now everything was going smooth until I placed it all in the actual info window of google map marker. The problem is, first of all, the window becomes too big, secondly and most importantly, some parts of the content was showing up outside of the info window. I fixed as much as I could but I couldn't get the content of getting driving direction to stay within the info window. So, I just decided to use tabbed info window instead, which will also keep the contents more organized, for example: one tab for the address, one tab for the list of faculties in that building and another to get the address for driving direction. This way all the contents will stay within the info window, since there's less content in each tab and also the info window will not be too big. Moreover, the user will only view or click on the tab that they are interested in.

hmm... It took longer than I expected and still it's not 100% done yet. I modified the xml document and then updated my javascript file to reflect that change. But, I made some syntax error along with a little logic error, which is why, the javascript file wasn't even loading at all. It took me quite a while to figure out where the problems were and when I fixed that I was faced with another problem, which is still not solved yet. At first the tabbed window was showing up properly, but later I found out that, the tabs are duplicated each time I click on the marker. I fixed that but now the problem is that wrong tabs are showing up for the markers. I'm sure it's a logical problem within my code, which I have to figure out. In the mean time, besides reading Mike's Tutorial, I was searching Google Map API Group for information on tabbed info window and found an excellent source for tabbed window, which has an example of tabbed info window that matches excatly what I wanted to do. If you click on the sidebar links or the markers, the tabbed info window will appear with the data which was loaded from a xml document file. I was trying to do the same. I haven't studied his source code yet, just glanced at it. First I'll try to solve the problem myself, since I think I'm pretty close to getting it done. If I can't, I might have to study the source code of that site.

Nice... I actually fixed the problem myself. The example that I found yesterday, I didn't need to consult that. The tabs are working fine now. The issue was regarding some array, which needed to be emptied before they were being used again. This is how I have the tabbed window working now...

//read the xml document and get the tag that contains the tab elements
....
/**
 * Since the htmlInfo element also has multiple elements for tabs,
 * loop over its child elements and save all the tabs in an array
 */
var html = markers[i].getElementsByTagName("htmlInfo");
var tabs = html[0].getElementsByTagName("tab") ;
var tabLabel ;
var tabContent ;
var infoTabs = [] ;
var infoTabContents = [] ;

for (var j = 0 ; j < tabs.length ; j++)
{
	//now, for each tab's get it's label tag and content tag
	tabLabel = GXml.value(tabs[j].getElementsByTagName("tabLabel")[0]) ;
	tabContent = GXml.value(tabs[j].getElementsByTagName("tabContent")[0]) ;
	
	infoTabs.push(tabLabel) ;
	infoTabContents.push(tabContent) ;
}
var tabbedWindow = [] ;
for (var j = 0 ; j < infoTabs.length ; j++)
{
	tabbedWindow.push(new GInfoWindowTab(infoTabs[j], infoTabContents[j])) ;
}
createMarker(point,label,outputLocation, tabbedWindow);
infoTabs = removeArrayContent(infoTabs) ;
infoTabContents = removeArrayContent(infoTabContents) ;
tabbedWindow = removeArrayContent(tabbedWindow) ;

function createMarker(point,name,sidebarObjId, markerTab)
{
// this variable will collect the html which will eventualkly be placed in the sidebar
var sidebar_html = "";
var marker = new GMarker(point);
var tabs = [] ;

GEvent.addListener(marker, "click", function(){
	marker.openInfoWindowTabsHtml(markerTab) ;
});
....
}
			
			

Anyways... It probably took about half an hour. After that, I made the CSS for the contents of the tabs. Now all I have to do is, place the tabs and its contents for all the other markers in the xml document. Oh... yea, another thing needs to be done for this tabbed window is the form for getting driving direction. That should be alright.

Phew... finally I finished it. It took a long time to put all those informations in the xml file. I had to look for the building images, find websites for each departments and also, I had to get the geocode information for each butildings since some of them were pointing at the wrong place. When I first started this project, I used GeoCoder.ca to get the geocode for the buildings. In this site, you specify the address and it will return the lattitude and longitude informations. Since some of the geocode information was wrong, I used Get Lon Lat too provided by Mapki, where you simply click on the map and it will return the geocode information of the clicked place on the map. And I took the images of the buildings from Ryerson's Campus Map webpage. And I still have to do the same to information building's xml file.