Google Japan Blog: Google Maps API でマネタイズを見て、Google Mapsに広告を載せられることを知りました。

これはいい！ということで、以前、iphone向け（現在は、Android、Firefox 3.5に対応済）に開発したWebアプリ、Strayed Childの地図に載せたいと思います。

バックナンバーはこちら。

Services – Google Maps API – Google Codeを参考に実装してみました、非常に簡単です。

	var adsManagerOptions = {
		maxAdsOnMap : 2,
		style: G_ADSMANAGER_STYLE_ADUNIT
	};

	adsManager = new GAdsManager(map, 'pub-XXXXXXXXXX', adsManagerOptions);
	adsManager.enable();

という数行を、初期化処理に入れればいいだけです。

ただ、これだと、



のように、住所表示が広告に押し出されて、画面からはみでるような感じになってしまいます。

Google Maps API Reference – Google Maps API – Google Codeを見ると、

G_ADSMANAGER_STYLE_ICON

というオプションがありました。広告がアイコン風の表示になるのだと思い、試してみたのですが、広告自体が表示されなくなってしまいました。

日本語訳のGoogle Maps API リファレンス – Google Maps API – Google Codeを見ると、なんと、styleオプション自体がありません。。。



えー。。。

とりあえず、アイコン風表示は対応されるまで待つことにします。

とはいえ、このままでは住所が見づらいので、広告の表示は1件にしました。

表示されている地図に関連した広告が出るはずなので、便利になると思います！iPhoneやAndroidをお持ちの方、是非、試してみてください！

Strayed Child

flashcast：フリーで働くITエンジニア集団のブログ: Strayed ChildをFirefox 3.5対応の続きです。

もともとStrayed Childは、

• 拡大／縮小はiPhone、Androidの操作に任せていた。
• 表示は極力、地図だけにしたい。

ということで、ZoomIn、ZoomOutのボタンはつけていませんでした。

ただ、PCのブラウザで見ると、拡大はダブルクリックでできるのですが、縮小ができません。これは不便。。。なので、最小限の拡大／縮小機能を実装します。

GSmallZoomControl

を使います。

履歴画面に遷移するボタン

の下に出すようするため、

GControlPosition

を使います。

map.addControl(new GSmallZoomControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 34)));

こんな感じになります。

iPhoneやAndroidで見た時にはボタンが小さくなってしまいますが、あまり利用する場面が少ないと思いますので、とりあえず、良しとします。

それと、SQLiteが使える場合に、履歴画面に遷移するボタンを出すようにしていましたが、常に出すようしたので、SQLiteが使えない場合に履歴画面に遷移すると、「ごめんなさい」メッセージを表示するようにしました。

これでPCのブラウザでの使い勝手も、少しは良くなりました！

Firefox 3.5では位置情報通知機能が実装されています。
次世代ブラウザ Firefox – 位置情報通知機能

なので、Strayed ChildをFirefox 3.5でも使えるようにしたいと思います。

Geolocation対応

まず、位置情報を取得する部分を実装します。
とはいっても、Geolocation API Specificationに準拠しているようなので、iPhone対応のロジックがそのまま利用できます。
Geolocation の利用 – MDC

ただ、

どのような仕組みで動作するのですか？

位置情報通知機能に対応した Web サイトを開くと、Firefox はあなたの現在地をそのサイトに知らせて良いかどうかを尋ねます。

知らせることを許可した場合、Firefox は近隣の無線 LAN アクセスポイントに関する情報と、あなたのコンピュータに割り当てられている IP アドレスを収集します。それから Firefox はその情報を既定の位置情報サービスプロバイダである Google Location Service へ送信し、推測されたあなたの現在地を取得します。そしてこの位置情報が、情報を求めてきた元のサイトに知らされます。

知らせることを許可しなかった場合は、Firefox は何もしません。

次世代ブラウザ Firefox – 位置情報通知機能より引用。

IPアドレスから位置情報を割り出している場合には、ほとんどの場合、位置情報に変化がありません。

日本を基準にして、現在地の緯度・経度ともに1秒（約30メートル）以上変化した場合に住所を再表示するようにしたいと思います。

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（iPhoneでテスト編）より引用。

2回目以降は地図上に住所が表示されなくなってしまいます。

これではつまらないので、初期表示時の仕様を少し変えます。

• 位置情報通知機能が利用できる場合、getCurrentPositionを利用して位置情報を取得する。
• 位置情報通知機能が利用できる場合、または、パラメータで緯度・経度情報を渡されたときのみ、住所を吹き出しに表示するようにする。

ということで、ロジックは以下のようになります。

 if (hasParam) {
  getAddress(new GLatLng(lat, lng), hasParam, isDbConnect);
 }
 else {
  if (gps != null) {
   gps.getCurrentPosition(
    function(e) {
     getAddress(new GLatLng(e.coords.latitude, e.coords.longitude), hasParam, isDbConnect, true);
    },
    function(error) {
     alert(error.message);
    }
   );
  }
 }

Firefox 3.5でStrayed Childにアクセスすると、こんな感じになります。

SQLite対応

試したのですが、Firefox 3.5.2ではHTML5 ローカルデータベース機能はまだサポートされていないようなので（2009/09/03時点）、実装できませんでした。

Gearsインストール済の環境でStrayed Childにアクセスすると、こんな感じになります（住所履歴画面に遷移するボタン、吹き出しの中の「save」ボタンが有効になっています）。

よかったら、試してみてください！
Strayed Child

flashcast：フリーで働くITエンジニア集団のブログ: Strayed ChildをAndroid対応（gears編）でAndroidでも現在地の住所を表示できるようにしました。今回は、Androidでも住所の保存・閲覧・削除ができるようにします。

住所の保存は、iPhone同様、SQLiteを利用します。
また、前回同様、Gears API – Google Codeを利用します。

Database2API – gears – A proposal to add native HTML5 SQL API to Gears – Project Hosting on Google Codeが利用できれば、データを処理する部分はほとんど修正する必要はなかったのですが、試してみたところ、うまくいかず、まだサポートされていないようでしたので、Database API – Gears API – Google Codeで実装しました。

データベースをオープンする処理です。

function checkGearsDbConnect() {
 var isDbConnect = true;

 try {
  db = google.gears.factory.create('beta.database');
  db.open('StrayedChild');
 }
 catch (error) {
  isDbConnect = false;
 }
 finally {
  return isDbConnect;
 }
}

iPhoneの時は、データベース名にスペースが含まれていても大丈夫だったのですが、

db = openDatabase('Strayed Child', '1.0', 'Strayed Child');

Gearsの場合はダメみたいなので、「StrayedChild」というデータベース名にしました。

SQLを実行する部分は、今後、各種ブラウザのHTML5 ローカルデータベース機能の対応動向を意識して、ユーザエージェントで処理を切り替えるような実装はあえてやめました。

function executeSql(sql, params, callback, date) {
 var result = true;

 try {
  if (db.transaction != null) {
   db.transaction(
    function(transaction) {
     transaction.executeSql(sql, params,
      function(transaction, resultSet) {
       if (callback) {
        callback(resultSet, date);
       }
      }
     );
    },
    function(error) {
     result = false;
    }
   );
  }
  else {
   var resultSet = db.execute(sql, params);

   if (callback) {
    callback(resultSet, date);
   }
  }
 }
 catch (error) {
  result = false;
 }
 finally {
  return result;
 }
}

コールバック関数は、SQLの実行結果を画面に反映させたいようなときに指定します。例えば、保存した住所情報を一覧表示するような場合です。後処理が必要なければ、コールバック関数には何も指定しません。

保存した住所情報を閲覧する画面です。

Androidをもっている方、是非試してみてください！
Strayed Child

Strayed ChildをAndroid対応したいと思います。
まずは、現在地の住所を表示する部分です。

現在地の緯度・経度の取得には、Androidにデフォルトでインストールされている、Gears API – Google Codeを使います。

まず、ダウンロードしたgears_init.jsを読み込みます。

<script type="text/javascript" src="../js/gears_init.js"></script>

これで、以下のGPS関連のAPIが使えるようになりました。
Geolocation API – Gears API – Google Code

gps = google.gears.factory.create('beta.geolocation');

navigatorオブジェクトのgeolocationと使い分けができるようにします。

function initGeoLocation() {
 if (gps == null) {
  if (navigator != null && navigator.geolocation != null) {
   gps  = navigator.geolocation;
  }
  else {
   try {
    gps = google.gears.factory.create('beta.geolocation');
   }
   catch (error) {
    return false;
   }
  }
 }

 return true;
}

GPS監視の開始と停止のAPIはiPhoneの時と同じなので、

function changeWatchLocation(isWatch, isDbConnect) {
 if (gps != null) {
  if (isWatch) {
   id = gps.watchPosition(
    function(e) {
     onLocationChanged(e, isDbConnect);
    },
    function(error) {
     alert(error.message);
    }
   );
  }
  else {
   if (id != null) {
    id = gps.clearWatch(id);
   }
  }
 }
}

環境の違いは意識せずに、GPSが利用できる時には監視を開始、停止できるようにしました。

実行時には、確認メッセージが表示されます。

これはエミュレータでの実行結果なのですが、エミュレータ上ではGPSは機能しないので、

Network provider at http://www.google.com/loc/json did not provide a good position fix.

というメッセージが表示されてしまいます。

実機がないのでエミュレータでなんとかシュミレーションさせたかったのですが、やり方がわかりません。ネイティブアプリでシュミレーションするやり方はあるのですが、今回の対応には効きませんでした。

なので、知り合いにお願いして、試してもらいました。

ちゃんと、機能しているようです。
実機を手に入れたら、あらためて、しっかりテストしたいと思います。

※　メンバーから、現在地を表示しているときと、地図をクリックして住所が表示されているときの違いがわかりにくい、という声があったので、現在地を表示しているときには、吹き出しの中に、

を表示するようにしました。

Androidを持っている方、是非、試してみてください！
Strayed Child