In this part of the lesson, we're going to return to working with the Google Maps API and focus on improving the user interface. We'll see how to gain greater control over the page layout and how to turn the plain HTML table in our sidebar into one that provides additional functionality (e.g., the ability to sort). To accomplish this, we're going to use the popular jQuery JavaScript framework (actually an extension to jQuery called jQuery EasyUI).
Before incorporating jQuery into our pages, I recommend you return to the w3schools site to get a quick jQuery crash course [1]. The entire tutorial is worth checking out, but in the interest of time I recommend working through only the following pages:
One of the earlier pages in the w3schools tutorial discussed two different ways of incorporating jQuery into your web pages: downloading it and hosting it on your web server, or including it from a CDN (content delivery network) like Google. I'm going to suggest including it from a CDN, especially in this course, so that you have less files to worry about putting in place on your own machine for testing and on the PSU web server when you're ready to post your assignment. As we'll see, this simply involves adding the following script element to the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js [2]"></script>
The jQuery EasyUI extension, on the other hand, is not hosted on a CDN to my knowledge, so we will download it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
<body class="easyui-layout">
Replace the existing map div with these two divs, one placing the map in the center region and another creating a sidebar in the east region:
<div id="map" data-options="region:'center',split:true"></div> <div data-options="region:'east',split:true" title="Cities" style="width:230px;"></div>
Save your document and test it out in a browser. (Consult this working example [6], if necessary.) Note that the sidebar (empty currently) can be resized or collapsed.
To insert a list of city features into the empty sidebar, we'll follow many of the same steps we took earlier in the course.
var markers;
markers = [];
function myclick(num) { google.maps.event.trigger(markers[num], "click"); }
markers.push(marker);
<table id="sidebar" class="easyui-datagrid" rownumbers="true" sortName="city" sortOrder="asc" remoteSort="false" striped="true" singleSelect="true"> <thead> <tr> <th field="city" sortable="true">City</th> <th field="pop" sortable="true">Population</th> </tr> </thead> <tbody> </tbody> </table>
function addToSidebar(name, pop, i) { var lastRow = $('<tr/>').appendTo($("#sidebar").find('tbody:last')); lastRow.append( $('<td><a href="javascript:myclick(' + i + ')">' + name + '</a></td>') ); lastRow.append($('<td/>').text(pop)); }
addToSidebar(name,pop,i);
$('#sidebar').datagrid();
Now that you've seen how a JavaScript framework like jQuery can be used to improve your Google API-based web maps, let's go further into the topic of user interface development by looking at HTML forms.
Links
[1] http://www.w3schools.com/jquery/default.asp
[2] https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
[3] http://www.jeasyui.com/download/index.php
[4] http://www.jeasyui.com/documentation/index.php
[5] http://www.personal.psu.edu/jed124/shapefileloader/shp_load_single_info_window_fix.html
[6] http://www.personal.psu.edu/jed124/shapefileloader/shp_load_single_jquery_layout.html
[7] http://www.jeasyui.com/documentation/
[8] http://www.personal.psu.edu/jed124/shapefileloader/shp_load_single_jquery_datagrid.html