Implementing the Tapless Marker Selection
Implementing the Tapless Marker Selection
===
Implementing the Tapless Marker Selection
Now that it is possible to distinguish between an active marker and an inactive one, it is time to implement the navigation controls to allow us to navigate through the markers without having to tap individual markers.
There isn’t too much to this next section, as it is just a matter of keeping track of the activated marker’s position in the marker array and updating the navigation controls accordingly. To do this, however, we will first need a utility function that will tell us a marker’s position in the marker array. The following code defines a getMarkerIndex function that should be included in the mapapp.js code just before the initScreen function.
function getMarkerIndex(marker) { for (var ii = 0; ii < markers.length; ii++) { if (markers[ii] === marker) { return ii; } // if } // for
return -1; } // getMarkerIndex
We then implement an updateMarkerNav function that will update the navigation button state. The ideal location for this function in the mapapp.js is just above the existing watchHash function.
function updateMarkerNav(markerIndex) {
CHAPTER 8: Location-Based Services and Mobile Mapping
// find the marker nav element var markerNav = $('#marker-nav');
// reset the disabled state for the images and unbind click events markerNav.find('img')
.addClass('disabled') .unbind('click');
// if we have more markers at the end of the array, then update // the marker state if (markerIndex < markers.length - 1) {
markerNav.find('img.right')
.removeClass('disabled') .click(function() {
activateMarker(markers[markerIndex + 1]); });
} // if
if (markerIndex > 0) { markerNav.find('img.left')
.removeClass('disabled') .click(function() {
activateMarker(markers[markerIndex - 1]); });
} // if } // updateMarkerNav
As per the earlier activateMarker function, the first thing the updateMarkerNav function does is reset the navigation buttons to the default state: disabled and with no click event handling.
Then, based on the value of markerIndex passed to the function, the navigation buttons are selectively enabled and click events bound. This will allow users of the application to navigate through markers without having to tap each one. We are not quite there yet, though, as our present logic is a little flawed in the addMarker function. Figure 8–13 shows the display after adding the four markers.
CHAPTER 8: Location-Based Services and Mobile Mapping
Figure 8–13. Something isn’t right here—we have our four pins but no navigation button. What gives? It turns out that navigation controls are displayed in response to the marker being
activated, and previously this was triggered when our marker was detected as the only marker in the list. While this was fine before, we are now configuring UI elements based on the number of markers, so this will have to be dealt with slightly differently.
While there are a number of ways that we could solve this particular problem, erring on the side of simplicity is probably best. In this case, we can simply add another exported function (called updateDisplay) to the MAPAPP module:
MAPAPP = (function() { ...
var module = { ...
updateDisplay: function() { // if we have at least one marker in the list, then // initialize the first marker if (markers.length > 0) {
activateMarker(markers[0]); } // if } };
return module; })();
With this new function in place, we can then remove the following lines from the addMarker function:
CHAPTER 8: Location-Based Services and Mobile Mapping
// if the first marker, activate automatically if (markers.length === 1) {
activateMarker(marker, content); } // if
Finally, we add the MAPAPP.updateDisplay() call into the initialize function in mapapp.html:
function initialize() { var latlng = new google.maps.LatLng(-33.866, 151.209);
MAPAPP.init(latlng, 13); MAPAPP.addMarker(latlng, 'Sydney', 'Sydney Australia'); MAPAPP.addMarker(new google.maps.LatLng(-33.859, 151.209), 'The Rocks'); MAPAPP.addMarker(new google.maps.LatLng(-33.857, 151.215), 'Sydney Opera House'); MAPAPP.addMarker(new google.maps.LatLng(-33.861, 151.211), 'Circular Quay');
// update the map display MAPAPP.updateDisplay();
} // initialize Now we have quite a functional set of boilerplate files that we can use to build a mobile
web-mapping application using Google Maps. However, before we move on to building our geosocial app in the next chapter, there is one final tweak that should be made to polish things up slightly.