Pro iOS Geo: Building Apps with Location Based Services

Deepen your app development skills with Pro iOS Geo. This book shows you how to use geolocation-based tools to enhance the iOS apps you develop. Author Giacomo Andreucci describes different ways to integrate geo services, depending on the kind of app you’re looking to develop: a web app, a hybrid app, or a native app. You’ll discover how to use the Google Maps API features to integrate powerful geo capabilities in your apps with a little effort.

You’ll learn how to: 

• Design geographic features for your apps while respecting usability criteria
• Design touristic geo apps
• Use HTML5 and the Google Maps JavaScript API to implement powerful geo functions in your apps
• Use Google Fusion Tables to display and query data in your maps
• Transform your geo web apps into hybrid apps that can be submitted to the Apple App Store
• Create native iOS geo apps using the new Apple Maps data through the Map Kit API

After reading Pro iOS Geo, you’ll have the knowledge and skills you need to add a geo dimension to all your apps, whether as a feature of a larger app— such as a social networking app that shows where friends are located in a selected area—or as the primary part of an app—such as a guide app that shows the monuments in your city. 

What you’ll learn

• Design geographic features for your apps while respecting usability criteria
• Design touristic geo apps
• Use HTML5 and the Google Maps JavaScript API to implement powerful geo functions in your apps
• Use Google Fusion Tables to display and query data in your maps
• Transform your geo web apps into hybrid apps that can be submitted to the Apple App Store Create native iOS geo apps using the new Apple Maps data through the Map Kit API 

Who this book is for

This book is for experienced iOS app developers looking to learn, use and integrate various geo-location based tools and APIs.

Table of Contents

Part 1: Introduction

Chapter 1: Getting Started

Part 2: Web Apps

Chapter 2: Map-based Web App Basics: Hello World

Chapter 3: Map Controls and Styles

Chapter 4: Creating a GUI for the App with jQuery Mobile

Chapter 5: Overlays

Chapter 6: Implementiong Geolocation

Part 3: Hybrid Apps

Chapter 7: Creating Hybrid Apps

Part 4: Native Apps with Apple Map Kit

Chapter 8: Introduction to the Core Location Framework

Chapter 9: Introduction to Apple Maps and the Map Kit Framework

Chapter 10: Displaying Ojects on a Map 

Appendix A: Understanding the Terms of Service

Google I/O 2012 - Maps for Good

Developers are behind many cutting-edge map applications that make the world a better place. In this session we'll show you how developers are using Google Earth Builder, Google Earth Engine, Google Maps API and Android apps for applications as diverse as ethno-mapping of indigenous cultural sites, monitoring deforestation of the Amazon and tracking endangered species migrations around the globe. Come learn about how you can partner with a non-profit to apply for a 2012 Developer Grant and make a positive impact with your maps.

Google lower price of Google Maps API

Google lower Maps API usage fees and simplifying limits for both Styled and regular maps. Here are the details:

• Changes to pricing. While the Maps API remains free for the vast majority of sites, some developers were worried about the potential costs. In response, we have lowered the online price from US $4 per 1,000 map loads to 50¢ per 1,000 map loads.
• Simplified limits. We’re eliminating the previous distinction between Styled Maps and regular unstyled maps. The same usage limits and pricing now apply to applications using Styled Maps and the default Google Maps style.

Source: Google Geo Developers Blog -Lower pricing and simplified limits with the Google Maps API

Google Chart Tools Geochart

Google Chart Tools provide visualization of Geochart. You can easy to embed map of a country, a continent, or a region with tregion mode or marker mode.

NCC Group has released its Origin of Hacks report for the first quarter of 2012, tracking the countries from which global computer hacking originated throughout the first three months of the year. The data will be used as a example to demonstrate Geochart.

Please note that that data in the chart is roughly. Hi-resolution map and top-10 table available on request, please refer http://www.nccgroup.com/newsandevents/latest/12-05-17/Origins_of_Global_Hacks_UK_leaps_up_hacking_league_table.aspx

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', '%'],
    ['US', 17],
    ['China', 13],
    ['Russia', 12],
    ['Netherlands', 11],
    ['Ukraine', 3],
    ['Germany', 2],
    ['United Kingdom', 2],
    ['South Korea', 2],
    ['Denmark', 2],
    ['Brazil', 2]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Display Map on webpage to track location

In the previous article "Display Map of current location", we load current map of current using window.navigator.geolocation.getCurrentPosition() when page loaded. That means the map show the location when page load only, will not update when the user(or device) moved. We are going to replace it with window.navigator.geolocation.watchPosition() to get repeated position updates, to track the updated location.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
 window.navigator.geolocation.watchPosition(
  successCallback, errorCallback);
} else {
 alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
 loadmap();
 var mylatitude = position.coords.latitude;
 var mylongitude = position.coords.longitude;
 document.getElementById("latitude").innerHTML
  = "latitude: " + mylatitude;
 document.getElementById("longitude").innerHTML
  = "longitude: " + mylongitude;
 document.getElementById("accuracy").innerHTML
  = "accuracy: " + position.coords.accuracy;
 loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
 alert(error);
}

var map;

function loadmap(mylat, mylong){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(mylat, mylong),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

Display Map of current location

Combine the last two article "Embed Google Maps in web page using Javascript" and "Get device geolocation, using window.navigator.geolocation", we can display Google Maps of our current position.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(
 successCallback, errorCallback);
} else {
alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
loadmap();
var mylatitude = position.coords.latitude;
var mylongitude = position.coords.longitude;
document.getElementById("latitude").innerHTML
 = "latitude: " + mylatitude;
document.getElementById("longitude").innerHTML
 = "longitude: " + mylongitude;
document.getElementById("accuracy").innerHTML
 = "accuracy: " + position.coords.accuracy;
loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
alert(error);
}

var map;

function loadmap(mylat, mylong){
var options = {
 zoom: 15,
 center: new google.maps.LatLng(mylat, mylong),
 mapTypeId: google.maps.MapTypeId.SATELLITE,
 };

map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

next:
- Display Map on webpage to track location

Get device geolocation, using window.navigator.geolocation

It's a html example to get device geolocation, using window.navigator.geolocation API, run on Opera Mobile on Android mobile. Before the browser can get device geolocation, user will be prompted to confirm share location with browser.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>

<script type="text/javascript">

if (window.navigator.geolocation) {
 window.navigator.geolocation.getCurrentPosition(
  successCallback, errorCallback);
} else {
 alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){

 document.getElementById("latitude").innerHTML
  = "latitude: " + position.coords.latitude;
 document.getElementById("longitude").innerHTML
  = "longitude: " + position.coords.longitude;
 document.getElementById("accuracy").innerHTML
  = "accuracy: " + position.coords.accuracy;
}

function errorCallback(error) {
 alert(error);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

Embed Google Maps in web page using Javascript

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
#mapcanvas { height: 360px; width: 480px}
</style>

<script>
var map;

function loadmap(){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(51.507222, -0.1275),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>
</head>
<body onload="loadmap();">
<h1>Mobile-Web-App: Google Maps</h1>
<div id="mapcanvas"></div>
</body>
</html>

jquery-ui-map: Google maps plugin for jQuery and jQuery Mobile

The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers.

It is also very flexible, highly customizable, lightweight (3.3kB or 4kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn't have javascript enabled.

Project Home: jquery-ui-map