2011-02-06

Google maps api v3 マーカー(MarkerManager使用)（自分用メモ）[Google][maps]

MarkerManagerを使ってGoogle maps 上にマーカーを置いてみます。

google-maps-utility-library-v3プロジェクトサイト
Google Code Archive - Long-term storage for Google Code Project Hosting.
HTML

<html>
<head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
  <script type="text/javascript" src="map.js"></script>
</head>
<body onload="init();">
  <button onclick="displayMarker()">マーカー表示</button>
  <button onclick="hideMarker()">マーカー非表示</button>
  <button onclick="clearMarkers()">マーカー削除</button>
  <div id="map" style="width:45%; height:60%"></div>
</body>
</html>

Javascript(map.js)

var centerLat =  35.678918;
var centerLon = 139.746596;
var sLat      = centerLat;
var sLon      = centerLon;
var zoom = 6;
var num  = 10;
var dist = 0.5;
var defMarker = 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png';
var moMarker  = 'http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png';
var map;
var mMng;

function init() {
  mapOpt = {
    zoom: zoom,
    center: new google.maps.LatLng(centerLat, centerLon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapOpt);
  
  mMng = new MarkerManager(map);

  var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
    createMarkers();
    google.maps.event.removeListener(listener);
    mMng.hide();
  });
}


function createMarkers() {
  var lat = sLat;
  var lon = sLon;
  var no = 1;

  for(var latIdx = 0; latIdx < num; latIdx++) {
    for(var lonIdx = 0; lonIdx < num; lonIdx++) {
      var marker = new google.maps.Marker({
	position: new google.maps.LatLng(lat, lon),
	icon: defMarker,
	title: 'No: ' + no,
	infoWindowOpenTimes: 0 // マーカークリックの度に何重にも吹き出しが
	                       // 表示されないようにするための制御用プロパティ
			       // を追加しておく。
      });
      lat += dist;
      no++;

      mMng.addMarker(addEvent(marker), map.getZoom());
    }

    lat  = sLat;
    lon += dist;
  }
}

function addEvent(marker) {
  google.maps.event.addListener(marker, 'click', function(){
    if(0 == marker.infoWindowOpenTimes) {
      var pos = marker.getPosition();
      var content = 
        marker.getTitle() + '<br/>Lat: ' + pos.lat() + '<br/>Lon: ' + pos.lng();
      var infoWindow = new google.maps.InfoWindow({
        content: content
      });

      google.maps.event.addListener(infoWindow, 'closeclick', function(){
        marker.infoWindowOpenTimes = 0; 
      });
	
      infoWindow.open(map, marker);

      marker.infoWindowOpenTimes += 1;
    }
  });

  google.maps.event.addListener(marker, 'mouseover', function(){
    marker.setIcon(moMarker);
  });

  google.maps.event.addListener(marker, 'mouseout', function(){
    marker.setIcon(defMarker);
  });

  google.maps.event.addListener(marker, 'dblclick', function(){
    marker.setMap(null);
  });

  return marker;
}

function displayMarker() {
  mMng.show();
}

function hideMarker() {
  mMng.hide();
  mMng.refresh();
}

function clearMarkers() {
  mMng.clearMarkers();
}

2011-02-06

Google maps api v3 マーカー（自分用メモ）[Google][maps][api]

Google maps api v3を使ってマーカーを置いたり。v3はAPIキーなしで使えていいですね。

数多くマーカーを置きたい時はMarkarManagerクラスを使うとよい場合がある。それは後ほど。

公式ドキュメント
http://code.google.com/intl/ja/apis/maps/documentation/javascript/

HTML

<html>
<head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="map.js"></script>
</head>
<body onload="init();">
  <button onclick="displayMarker()">マーカー表示</button>
  <button onclick="removeMarkers()">全マーカー削除</button>
  <div id="map" style="width:45%; height:60%"></div>
</body>
</html>

Javascript(map.js)

var centerLat =  35.678918;
var centerLon = 139.746596;
var sLat      = centerLat;
var sLon      = centerLon;
var zoom = 6;
var num  = 5;
var dist = 0.5;
var defMarker = 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png';
var moMarker  = 'http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png';
var map;
var markers;

function init() {
  mapOpt = {
    zoom: zoom,
    center: new google.maps.LatLng(centerLat, centerLon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapOpt);
  
  markers = new google.maps.MVCArray();

  createMarkers();
}


function createMarkers() {
  var lat = sLat;
  var lon = sLon;
  var no = 1;

  for(var latIdx = 0; latIdx < num; latIdx++) {
    for(var lonIdx = 0; lonIdx < num; lonIdx++) {
      var marker = new google.maps.Marker({
	position: new google.maps.LatLng(lat, lon),
	flat: true,
	icon: defMarker,
	title: 'No: ' + no,
	infoWindowOpenTimes: 0 // マーカークリックの度に何重にも吹き出しが
	                       // 表示されないようにするための制御用プロパティ
			       // を追加しておく。
      });
      lat += dist;
      no++;

      markers.push(marker);
    }

    lat  = sLat;
    lon += dist;
  }
}

function displayMarker() {
  markers.forEach(function(marker, idx) {

    google.maps.event.addListener(marker, 'click', function(){
      if(0 == marker.infoWindowOpenTimes) {
        var pos = marker.getPosition();
        var content = 
          marker.getTitle() + '<br/>Lat: ' + pos.lat() + '<br/>Lon: ' + pos.lng();
        var infoWindow = new google.maps.InfoWindow({
          content: content
        });

        google.maps.event.addListener(infoWindow, 'closeclick', function(){
	  marker.infoWindowOpenTimes = 0; 
	});
	
        infoWindow.open(map, marker);

	marker.infoWindowOpenTimes += 1;
      }
    });

    google.maps.event.addListener(marker, 'mouseover', function(){
      marker.setIcon(moMarker);
    });

    google.maps.event.addListener(marker, 'mouseout', function(){
      marker.setIcon(defMarker);
    });

    google.maps.event.addListener(marker, 'dblclick', function(){
      marker.setMap(null);
    });

    marker.setMap(map);
  });
}

function removeMarkers() {
  markers.forEach(function(marker, idx) {
    marker.setMap(null);
  });
}

2010-08-23

Google Developer Day 2010 Quize OAuth

OAuthのソースを。言語はRubyで。横着してruby-oauthを使用しています。
以下で200レスポンスが返って来ました（当時は。今はどうかは分からない。）。

require 'rubygems'
require 'oauth'

PROVIDER_URL    = 'http://gdd-2010-quiz-japan.appspot.com'
CONSUMER_KEY    = '*******'
CONSUMER_SECRET = '*******'

access_token = OAuth::AccessToken::new OAuth::Consumer.new(
  CONSUMER_KEY,
  CONSUMER_SECRET,
  :realm => 'devquiz')

response = access_token.post(
  "#{PROVIDER_URL}/oauth/#{CONSUMER_KEY}?hello=world&hello=world")

puts response.body

2010-08-11

【Ruby】整数と実数の判定を思いつきで。

書いてみました。スマートさの欠片もありませんがね。
私ならこう書くyp!というのがあればドシドシお願いします。

def check_numerical_value value
  value_class = value.class.to_s
  if 'String' == value_class
    values = value.split '.'
    if 1 < values.length
      begin
        Float(value)
        result = 'float'
      rescue
        result = 'string'
      end
    else
      begin
        Integer(value)
        result = 'integer'
      rescue
        result = 'string'
      end
    end
  elsif 'Fixnum' == value_class
    result = 'integer'
  elsif 'Float' == value_class
    result = 'float'
  end
end

・結果

p check_numerical_value('hoge') => "string"
p check_numerical_value('10')   => "integer"
p check_numerical_value('10.0') => "float"
p check_numerical_value('')     => "string"
p check_numerical_value(10)     => "integer"
p check_numerical_value(10.0)   => "float"

2010-06-27

Androidアプリ開発環境を構築してみる(Ubuntu 10.04 LTS + Android SDK + Eclipse)

『こんなAndroidアプリ作ってやるぜ！！』ということもなく、開発環境だけでも作ってみようか、
という思いつきでございます。
今回は仮想マシンとして新に作成したUbuntu 10.04 LTS の環境上に構築してみます。
ではLet's GO!

Sun JDK インストール

SunのJDKをインストールします。
インストール手順はid:Yoshioriさんのエントリーを参照させてもらいました。
→のリンクから参照してみてください。Ubuntu 10.04 で sun-java-6 をインストール - 宇宙行きたい

Android SDK インストール

Android SDKをインストールします。
Download Android Studio and SDK tools からプラットフォームに合わせたSDKをダウンロード。
今回はandroid-sdk_r06-linux_86.tgzをダウンロードしました。
上記のページにQuick Startとして要求されるシステム構成やインストール手順が書いてありますので、
それを読めばインストールできると思います。
今回のようにEclipseで開発を行う場合にはダウンロードしたandroid-sdk_r06-linux_86.tgzを展開するだけでよさげ。
ということで展開、生成されたディレクトリをホームディレクトリに移動してみました。

$ cd Downloads
$ tar xvzf android-sdk_r06-linux_86.tgz
$ mv android-sdk-linux_86 $HOME

Eclipse インストール

統合開発環境 Eclipseをインストールします。
こちらのダウンロードページからダウンロードします。Eclipse Downloads | The Eclipse Foundation
ダウンロードページ行ったら、なんだかいっぱい並んでてどれダウンロードすればいいんだYO！
ということで、Android SDKのインストール手順ページDownload Android Studio and SDK tools を見ると
Java開発用かRCP開発用のEclipse ディストリビューション、Eclipse 3.5ではEclipse Classicディストリビューションを
推奨するとのこと。2010/06/27時点でEclipse 3.6がリリースされているので、Eclipse Classic 3.6.0を
ダウンロードいたしました。
これも展開するだけですね。楽ちん。

$ tar xvzf eclipse-SDK-3.6-linux-gtk.tar.gz
$ mv eclipse $HOME

ADTプラグインインストール

Eclipse上からAndroid 開発ツールを利用するためのプラグインをインストールします。
Eclipseを起動してADT Plugin (UNSUPPORTED) | Android DevelopersのEclipse3.5用の手順で導入。

ADTプラグインの設定

ADTプラグインの導入が終わったら設定を行いましょう。(上記ページにも書いてはありますが。)
Eclipseのメニューの Window > Prefencesから画面を開きます。

左側のツリーでAndroidを選ぶと、なにやらダイアログが2つ出てきます。
1つは「Android SDKのロケーションが設定されてねぇぞ！」と怒っているようです。当然です。
これからそれを設定しようとしているのですから。「そう焦るなよ」という寛大な心でOKボタンをおして消しましょう。
他方のダイアログはAndroid SDKさんが出しているのでしょうか。「統計情報をGoogle様にお送りします、いいですね！」
というお知らせのようです。チェックボックスらしきものが見えますが、何度クリックしても消えません！
とりあえず放っておきます。

SDKロケーションの所に展開・配置したAndroid SDK ディレクトリのパスを設定してOKします。

Androidプロジェクト実行時に用いる仮想デバイスを作成します。
Window > Android SDK and AVD Manager から画面をだします。

まず、SDK Platformを導入します。左側ツリーの「Available Packages」を選択してください。
パッケージのリストが展開されるので、今回は最新であろうSDK Platform Android 2.2,API 8, revision 1
にチェックをいれInstall Selected。

インストールが終わったら、VirtualDevicesに戻りNewをクリックすると次の画面が出てきます。
とりあえずName入力とTargetを選んでおけば作成できるようです。
(AVD名には"a-z A-Z 0-9 ._"が使用できるようですね。)

AVDを作成したら環境構築は終了・・・のまえに先ほど放っておいたダイアログを見てみましょう。
チェックボックスがON/OFFできるようになってる！
チェックを外してProceed。(とはいえ外すはずさないは個々の判断です。Googleに協力するぜ！という素晴らしい方はそのままで。)
これで終了です。お疲れさまでした。

Enjoy Android life!