あるものを作っていて、そのツールがGPSで経緯を取得して、表示するツールでこれをなんとかケータイ版に移植しようかと考え中。PHPでケータイからデータを取得できるらしいので、ライブラリを使って試してみようと思う。

ていうことで、メモ。

• PHPで携帯位置情報を扱うライブラリを僕も作りました
• 携帯GPSの基礎知識たち
• 「Google Static Maps API」を使って携帯でGoogleマップを表示する
• 位置情報を取得してみる

「すきなばしょ」の表示速度が気になるようになってきた。

本当にできることがないのかいろいろと考えてみたら、Google Maps API V2からV3へバージョンアップしてみようかと思った。実際にやってみたところ、表示速度が若干あがったような気がした。

今週、ちょっとバージョンアップの作業をしてみようと思った。

ここ３日くらいずっと、モバイルに搭載してあるGPSを使って、自分の位置を取得できるかずっと格闘しつづけていた。
iPhone/Androidともに案外簡単に実装できる。しかも、Javascriptで簡単に実装可能。それをGoogle Maps APIに値を渡せば、表示もできちゃう。

「すきなばしょ」の機能として埋め込もうと思って、作っていたけど、ほぼ完成している。
あとは、ちょっとCSSとJavascriptの調整をするだけ。

難しそうなことが簡単にできちゃうことが、すごいと思った。

参考にしたサイト

• iPhone OS 3.0 のブラウザから使えるようになったGPS現在位置情報をTwitterに投稿するJavaScript
• Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する

今、スマートフォンで位置情報を取得し、メール投稿する時にGPS情報も送信する、支援ツールを作っている。というかもう完成した。

iPhoneとAndroidで位置情報を取得できるようにして、Google Maps API v3にデータを渡して表示するということをやっているんだけど、前回の方法iPhoneは簡単に取得できる。

Androidも実は、Gears Geolocation APIを使うと案外簡単に位置情報が取得できる。
PCで検証するには、Google Gearがインストールされていないと確認ができないよ。

Geolocation API – Gears API – Google Code

を見ると書いているけど、gears_init.jsを置いて、以下のように記述すると

<pre><pre><script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var geo = google.gears.factory.create('beta.geolocation');

function updatePosition(position) {
  alert('Current lat/lon is: ' + position.latitude + ',' + position.longitude);
}

function handleError(positionError) {
  alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(updatePosition, handleError);
</script>

簡単に取得できる。あとは、Google Maps API V3と組み合わせて実装すれば完成。
案外簡単に位置情報が取得ができるから、いいよね。

参考にした記事

Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する

昨日、Google Maps API v3をじっくりといじってみた。
スマートフォンに対してパフォーマンス改善が行われたようなので、ちょっと前から気になっていた。v2に比べて、記述の仕方がぜんぜん違うけど、v3のほうがスマートでコードを書けるような気がする。設定の値とかまとまっているので、いいのかも。

v2に比べると機能が少ないかなという印象があるな。これは、そのうちv3にv2の全機能が移植されると思うので、それほど心配していない。

一番苦戦したのは、デフォルトのUIを外す作業が一番時間がかかった。リファレンスに書いてあったけど、なかなか見つけられなかった。

mapOption = {
zoom : defZoom
center : defLatlng,
navigationControl : false,
mapTypeControl : false,
scaleControl: true,
mapTypeId : google.maps.MapTypeId.SATELLITE
}
gmap = new google.maps.Map(jQuery('div#bgMap').get(0), mapOption);

作ったものをモロコピペしただけど、「navigationControl」、「mapTypeControl」、「scaleControl」で設定する。UIを取り除くだけじゃなく、UIの大きさもここで変更するようだ。

あと、地図をロードマップか衛星写真かを切り替えるときにも値が分からずハマった。

gmap.setMapTypeId(google.maps.MapTypeId.ROADMAP);

と書くようだ。v2のほうがシンプル。

全体的には、コードを書く量は減っているし、スマートフォンを対象に入れているようななので、機能が増えたらいろいろと使ってみたい。

参考にしたサイト

• 三丁目の電脳

いよいよ、ひとりで作っていたポータルサイトがやっと公開できるかなというところまでこぎつけました。
今は、wordpressの使い方のコンテンツを作っているところ。これが終わったらやっと告知ができます。ここまでくるのに何気に長かったな。。

でも、機能追加やgoogle maps apiのバージョンアップやら公開後もしばらくはやることがあるかな。
システム構築ができなくてもポータルサイトができるのは、うれしい。

今回、google maps apiにadsenseを追加できるそうなので、ご紹介。

実装方法としては

function initialize() {
      var map;
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(34.69243868718141,135.19187450408936), 13);
      }

      // Note: replace this publisher ID with your own.
      var publisherID = 'exsample';

      var adsManagerOptions = {
        maxAdsOnMap : 2,
        style: 'adunit',
      };

      adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
      adsManager.enable();
    }

と記述するみたい。

「adsManagerOptions」という変数を宣言をしているけど、ここでadsenseのオプションを制御しているようだ。
だから、いろいろと設定を変更することができるみたい。インスタンス（表現が間違っている？）するときにgoogle mapのオブジェクト指定すれば
あとは自動的に挿入してくれるみたい。

オプションでいろいろと設定できるようで、google maps apiのマニュアルに書いてあった。

var mapOptions = {
googleBarOptions : {
style : "new",
adsOptions: {
client: "partner-google-maps-api",
channel: "<em>AdSense for Search channel</em>",
adsafe: "high",
language: "en"
}
}
}

いろんなところにadsenseが貼れると便利だよね。

Google MapにAdsenseを貼り付けてみた

Google Maps Apiでマネタイズ

Google Maps api リファレンス（英語）