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.

WebApp.Net and AdMob integration

Introduction

When designing Web applications for IPhone, it could be useful to add advertising to your mobile application. My first idea was to use Google Ad for mobile but the product is only available for early access and i have not the possibility to use it.

After some googling, i have found that AdMob solution was a good alternative.

AdMob is an advertising platform specialized for mobile applications (Web and embedded). For the “business and marketing” side, they provide a suite of web tools to monitor and analyze web audience. For the developers, they provide a very flexible JavaScript Api witch is very easy to integrate in your WebApp. They also provide a dedicated SDK API for IPhone applications.

WebApp.Net is for me one of the best IPhone Web micro framework. It provides many powerful and easy to use items to help you designing great and must seen web applications for Apple's latest mobile devices.

After the presentation, let’s go to the integration…

Mini tutorial

Step1: Registering an AdMob account

This step needs only to be executed 1 time (and takes 5 minutes). It provides you an account and an access to the AdMob portal.

Step2: Registering a new web application

Click on the Add IPhone Site link

 

Click on the IPhone Site icon. You need yet to provide information regarding your web site and the look and feel of the advertising. After feeling the form, click on the Add button.

If the step has been successfully completed, you should see the newly registered application in the list.

Click on the Setup link to access the JavaScript code that needs to be added in your mobile web site.

Copy the script in the clipboard…

Step3: Adding the JavaScript snippet in the WebApp

…and then simply past it in the section just after the iHeader section (before the iGroup).

Pay attention that you only need to insert the code one time, all the other layers will display the advertising.

Step4 Testing the result…and activating the script

The default JavaScript provided by AdMob is for debug purpose and does not provide any “real advertising”. One you have made your tests, you need to activate the script by setting the test parameter to false;

AdMob provides other interesting JavaScript functions described into their developer website

The sample application is available at : http://visticot.frederic.perso.neuf.fr/webapp/admob/index.html

The result of the previous sample code is shown in the next picture.

 

Do not hesitate to give your feedback regarding AdMob and WebApp.Net !!!

del.icio.us Tags: AdMob,WebApp.Net