Add location in a IPhone WebApp with Google maps

Today, i wanted to test how to display user location on a Google maps using an IPhone Safari browser. In a previous blog, i have already demonstrated how to use the embedded JavaScript location Api provided by Safari. The only thing that was missing with that previous Web App was to display the user location on the Google maps.

For this demo, i have used the new Google maps Api (V3) available here.

I have developed 2 versions of the demo, 1 “standalone” Web App and an other Web App using the WebApp-Net framework.

Standalone WebApp

This very basic Web application will display your location when you click on the “Get Location” button. If you click on the “Watch Location”, the map will be refreshed each time your location has changed. To stop the tracking, you need to press the “Clear watch” button.

The location method used to retrieve your location can be GPS, WIFI, or other methods provided by the network.

Graphical interface:

As described in the next code, a div(map_canvas) is used to display the map.
3 buttons are available to get the location. A JavaScript listener is attached to each buttons to trig the location operation.
Initialization of the Google Maps Api is done in the initialize JavaScript method. 2 Divs are used to display the current location and address.

Google Maps initialization:

The initialize function initializes the Geocoder (used to return the address) and initialize the map. A default location is provided during the initialization.

JavaScript Safari Location Api:

4 functions are provided by the JavaScript Api to retrieve the location. Details of this function is available here. The displayLocation method is provided as callback when location is successfully retrieved by the location Api.

Sample application:

Go to this URL with your IPhone to test the application. http://visticot.frederic.perso.neuf.fr/webapp/loc/index-basic.html

Using the application, you can see that you can scroll the map !!!

 

Using the WebApp-Net framework

I wanted to test if the WebApp-Net framework was “compatible” with the Google maps and Location Api. No particular “tricks” needs to be solved during the development. You simply need to add the div used to display the map as described in the next picture:

Sample application:

Go to this URL with your IPhone to test the application. http://visticot.frederic.perso.neuf.fr/webapp/loc/index.html

Actually, scrolling the map like the previous application is not possible, some investigation need to be done with the WebApp-Net framework.

Location with Firefox3.5

The recent Google I/O event demonstrates the Firefox3.5 location feature. Indeed, in a near future, every HTML5 browser will have the possibility to return the browser location. This new interesting feature will allow developers to propose new kind of web applications taken into account user location.

Today, I decide to evaluate the Firefox3.5Beta4 location capabilities.
In a previous article, i had already evaluated the Safari IPhone3 W3C implementation. Idea was to verify if the same JavaScript code was working on both IPhone Safari and Firefox browsers.

For my tests, i take the same JavaScript used for the previous article and test it in the Firefox browser.

I’m happy to check that it works without ANY source code modification !!!

Even if it’s working fine, i have some interrogations regarding the location information returned by both implementation. I don’t understand very well how this location is returned with the IP address information. During my evaluation, without moving my laptop or changing my IP address, the location returned by the API is not always the same… more interesting, the location returned by both Safari and Firefox is not exactly the same !!! I will try in a next article to enter more into details in this interesting behavior.

Location with the IPhone Safari browser (SDK3.0)

Introduction

In a previous article, the Google Gears geo-location technology has been introduced to demonstrate how to retrieve the location from the Internet browser.

The IPhone SDK3.0 is introducing a W3C standardized location API in the Safari browser. Objective of this post is to evaluate this JavaScript API provided by the Mobile Safari browser.

I have found the following information from the Apple Web site:

• A PDF document providing information regarding geographic location classes.
• A podcast describing the JavaScript location API.
  

IPhone Web application illustration

A very basic IPhone WebApp is developed to test the JavaScript API.
The WebApp.Net micro framework has been used for this evaluation.

The application is containing the JavaScript code used to retrieve the location. This code is located in the <script> section of the HTML page. As you can see, 3 JavaScript functions has been used and any JavaScript import or other configuration is required.
You can call directly the navigator.geolocation.watchPosition function without any initialization…the navigator object is already known by the Safari…

• getCurrentPosition returns the current position in the displayLocation callback.
• watchLocation is used to track the IPhone location. Each time a new location is available, the displayLocation callback is triggered. This method is returning a watchId used to stop the tracking.
• clearWatch is used to stop the tracking started with the watchLocation.

The getCurrentPosition and watchLocation can have up to 3 parameters in input:

• The success location callback is returning a Position object.
  
  I have only checked that longitude, latitude and accuracy was returned, i need to complete the tests for altitude and speed. For the heading (direction) i think that this information is not returned with the current IPhone.
• The error callback is returned in case of error
• The PositionOptions object has 3 parameters

Starting the WebApp

When starting the application for the first time, the Safari browser displays a popup. You need to confirm that you agree to give your location. After multiple uses, the popup does not appear anymore.

In this sample application, the location is displayed in a popup.

Conclusion

The W3C standard API provided with IPhone 3.0 SDK is very easy to use and provides a position through multiple sources (GPS, WIFI, BTS…).
Any Geocoding API is provided by Safari to retrieve an address from this location.
This interesting feature is available with the Google Gears API…
During my evaluation (with the Beta version), the Safari browser was frozen multiple times and i need to restart the mobile…

The application sample will be available in a near future…

GeoLocation with Google Gears and GWT

Introduction

Geo-location is used and available everywhere and it exists multiple solutions to retrieve the position.
Computed position is more or less accurate regarding the technology used.

• Basic handsets can retrieve the location thanks the operator base stations.
• GPS handsets can retrieve a more accurate position with GPS or AGPS technologies.
• When GPS signal is to limited and WIFI available, WIFI positioning can be used...

More and more applications are available with location capabilities.
Those applications are used to find the nearest restaurant, cinema.
Big companies are launching new services to locate your friends (Google Latitude)…

To create those applications, a location API is required to get the handset or laptop position.
The main features of those API are:

• Returning a position (longitude, latitude, speed) taking abstraction of the underlying technologies (GPS, WIFI, BTS...)
• Returning the response accuracy.
• Tracking the handset(return multiple location each time a modification is observed)

This article will focus on the location API's available for PCs and laptops Internet browsers(Safari, IE, Firefox) and more especially on the Google Gears technology.

Google Gears

Google is proposing the Gears API for Geo-Location purpose.

This Google API like the majority of other APIs is returning the position BUT can in addition return geocoding information like the country, city, street number, street and region information.
After installing this plugin, web applications have the possibility to retrieve the location from the Internet browser.
A very basic JavaScript API is proposed to fulfill the main location features exposed previously.

For people familiar with the Google Web Toolkit framework, this Gears API is available as a GWT module.

Next part of the article will demonstrate how to use this GWT Gears API.

To create a web application with GWT and Gears, you need:

• Download the Gears plugin available Here
• Download the Gears GWT module available Here
• Create a basic GWT application with Eclipse or other Java editor

The GWT-Gears Java code

Retrieving the GeoLocation service from the Gears factory

To retrieve the current location, you can use the getCurrentPosition method. As you can see in the code, options can be used to specify the accuracy.

If you want to retrieve the address information determined from the longitude and latitude, you need to set the gearsRequestAddress to true. By default, the geocoding is disabled.

If you want to be notified each time the location is modified, you need to use the watchPosition method. This method is returning an identifier used to stop the tracking.

If you want to stop the tracking (started with the watchPosition method), you need to call the clearWatch method.

Conclusion

The Google Gears API (available as a JavaScript library or a GWT module) is very easy to use and provides interesting geocoding features to retrieve Address information.

A W3C standard available here is describing an API for location for Web browsers. The Google API seems very closed from this specification.

In a next article, an overview of the IPhone3.0 Safari location API will be exposed.