Coding a Boilerplate Mobile Mapping UI

With a clear understanding of the application UI that we want to create, let’s now take a look at the code that is required to pull the interface together.

First, here’s the HTML code that is required: <!DOCTYPE html>

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" media="screen" href="mapapp.css" /> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="mapapp.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() {

var latlng = new google.maps.LatLng(-34.397, 150.644);

MAPAPP.init(latlng, 8); MAPAPP.addMarker(latlng, 'Test Marker', 'Some test content');

} // initialize </script> </head> <body onload="initialize()"> <h1 class="simple floating">Mapping App Boilerplate</h1> <div id="map_canvas" style="width:100%; height:100%"></div> <div id="marker-nav">

</div>

CHAPTER 8: Location-Based Services and Mobile Mapping

<div id="marker-detail" class="child-screen"> <div class='content'>Some Test Content</div> <button class='close'>Close</button>

</div> </body> </html>

The preceding HTML is simply a modified version of the HTML that we used before to demonstrate a simple Google Maps interface. We have, however, moved the inline CSS and JavaScript into separate files and wrapped the JavaScript in a module called MAPAPP. This means the previous body of the initialize function is now largely encapsulated within the MAPAPP.init function. In this case, the initialize function simply initializes the map at the specified position (and zoom level) and then adds a simple test marker.

To get the actual page displaying in a similar way to our mockup (Figure 8–8), we also need to create a mapapp.css stylesheet that will contain our required CSS rules:

/* apply the standard css recommended in GMaps tutorial */ html {

height: 100% }

body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: Arial;

#map_canvas { height: 100% }

/* title styles */ h1.simple {

font-size: 0.9em; padding: 8px 4px 4px 8px; background: #333333; color: #AAAAAA; border-bottom: 2px solid #AAAAAA; margin: 0 0 4px 0;

h1.floating { position: absolute; width: 100%; z-index: 100;

/* marker navigation bar */ #marker-nav {

/* set general color and style */ background: rgba(33, 69, 123, 0.8); color: white;

CHAPTER 8: Location-Based Services and Mobile Mapping

font-weight: bold; text-shadow: 1px 1px 1px rgba(50, 50, 50, 0.85); text-align: center;

/* initialize positioning and layout */ position: absolute; top: 20px; z-index: 90; width: 90%; margin: 0 2%; padding: 18px 3% 10px;

/* add the 'mandatory' border radius */ border: 2px solid rgba(255, 255, 255, 0.2); -webkit-border-radius: 12px;

/* marker navigation elements styling */ #marker-nav img.left {

float: left; -webkit-transform: rotate(180deg);

#marker-nav img.right { float: right; }

#marker-nav img.disabled { opacity: 0.25; }

#marker-nav span.has-detail { text-decoration: underline; }

The preceding code can essentially be broken down into four sections:

1. First, we have the recommended core CSS from the basic Google Maps Hello World tutorial. This code sets the containing elements and the map container to fill the device screen. Note that additional CSS instruction has been added here ( overflow: hidden) to assist with displaying detail views later in the chapter. By applying the overflow: hidden CSS, we can hide elements offscreen and not have scrollbars show for the window.

2. Next, we provide some CSS that instructs an h1 header element with the class of simple to be rendered using an absolute position and appear with the look and feel of the simple header style that we defined back in Chapter 2. Note also that a z-index CSS rule has been specified to instruct the h1 element to display above the map. Without this instruction, the header would not be visible.

CHAPTER 8: Location-Based Services and Mobile Mapping

3. We then apply some look-and-feel styling for the #marker-nav element. Once again, absolute positioning is used to ensure that the navigation bar plays nicely with the Google map, which is set to occupy the entire screen. Note the use of percentage positioning in the width, padding, and margin CSS rules. Using percentages here provides the best possible chance of our mapapp template working with varying screen sizes.

4. Finally, we have some CSS rules for displaying the navigation buttons and having them align correctly inside the navigation menu. Additionally, here we see the webkit-transform CSS3 rule being used (as in Chapter 6 for the loading spinner) to enable us to reuse the same basic navigation arrow image but display it rotated 180 degrees.

All that is required to complete the display is to incorporate the very simple JavaScript Google Maps display logic from earlier into its own file, mapapp.js, and wrap this using the JavaScript module pattern so we can build a larger application on it.

MAPAPP = (function() { // initialize constants var DEFAULT_ZOOM = 8;

// initialize variables var map = null,

markers = [];

function addMarker(position, title, content) { // create a new marker to and display it on the map var marker = new google.maps.Marker({

position: position, map: map, title: title

// add the marker to the array of markers markers.push(marker);

// capture touch click events for the created marker google.maps.event.addListener(marker, 'click', function() {

// update the navbar title using jQuery $('#marker-nav .marker-title').html(marker.getTitle());

}); } // addMarker

var module = { addMarker: addMarker,

init: function(position, zoomLevel) {

// define the required options var myOptions = {

zoom: zoomLevel ? zoomLevel : DEFAULT_ZOOM, center: position, mapTypeControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP

CHAPTER 8: Location-Based Services and Mobile Mapping

// initialize the map map = new google.maps.Map(

document.getElementById("map_canvas"), myOptions);

return module; })();

In the preceding code, we separate the previously combined functionality into two functions: APPMAP.init and APPMAP.addMarker. This will give us an excellent base from which to implement the extended functionality in the next section (adding multiple markers and viewing marker detail).

With that last piece of the initial boilerplate code in place, an interface similar to the one displayed in Figure 8–9 should be displayed. The only real difference between the preceding JavaScript and the earlier samples is that this one uses jQuery to update the navbar title with the title of the marker in response to the marker being clicked.

Figure 8–9. With everything going to plan, our actual layout will be displayed much like our mockup.

CHAPTER 8: Location-Based Services and Mobile Mapping

Coding a Boilerplate Mobile Mapping UI