GEOG5870/1M: Web-based GIS A course on web-based mapping

Tidying up the code

So far we have generated a set of example maps, with small incremental changes each time. The code of our page has started to grow; see the source of the map page so far.

If the page is further developed in this way, it will soon start to become unmanageable. The page mixes together a number of distinct elements:

The page will become much more readable if we start to separate these aspects. The following code shows a re-written version of the page. The behaviour as far as the viewer of the page is the same as the previous version, however there are some important changes to the way that the code is structured. The code below shows the listing of three files:

Code for web page google_eg5.html:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js">
</script>
<script type="text/javascript" src="map_setup_google_eg5.js"></script>
<link rel="stylesheet" media="all" href="map_style.css" type="text/css">

<title>Google maps: example 5</title>
</head>

<body onload="initialize()">

<h1>Google Maps examples</h1>

<p>[<a href="../index.html">Personal home page</a> |
<a href="index.html">Geog5870 work</a>> ]</p>
<div class="gmap" id="map_canvas" style="height: 400px; width: 600px"></div>
</body>
</html>

Code for Cascading Style Sheet (CSS) file map_style.css:

body {
   background-color: white;
   color: black;
   font-size: small;
   font-family: Arial,Helvetica,sans-serif;
}

.gmap {
   margin: 5px;
   border: thin solid black;
   float: right;
}

Code for JavaScript file map_setup_google_eg5.js:

var map; // The map object
var myCentreLat = 53.807767;
var myCentreLng = -1.557428;
var initialZoom = 12;

function initialize() {
   var latlng = new google.maps.LatLng(myCentreLat,myCentreLng);
   var myOptions = {
      zoom: initialZoom,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map =
      new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

   var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"Hello World!"
   });

   /*
   * We can add another marker in a similar manner
   * We can create the new LatLng object as we
   * need it in the Marker() properties
   */

   var marker = new google.maps.Marker({
      position: new google.maps.LatLng(53.81,-1.56),
      map: map,
      title:"And another point"
   });
}

The first of these is a simplified version of our previous HTML code example. A number of elements have changed:

The second file (the map_style.css file) is the linked style sheet. It repeats the .gmap class definition used before, and adds, for the sake of example, a style definition for the body tag which sets the font style and size. Given the inheritance rules for Cascading Style Sheets (CSS), changes to the body tag are inherited by all tags which are found inside the body element unless another command overrides them.

Finally, the third file illustrated is the new map_setup_google_eg5.js script. Note that we've given it a rather specific name, rather than something generic that would apply to multiple maps (e.g. map_setup.js) – which naming model you use depends on whether we want to use the file with multiple maps (cf. with "map_style.css" which we want to use with multiple maps). The file is broadly the same as code embedded in the previous HTML, but has a few notable differences:

The revised version is an improvement, and should make code re-use and maintenance easier.

Task

Taking your example, split the code up in a similar fashion to the way it has been done above.
If it doesn't work, can you think why? Check your file names carefully and right click > inspect > console and check for errors.

[ Next: Adding information to markers ]
[Course Index]