また、テンプレート内にプレースホルダーを指定すると、ファイル作成時に特定の値を埋め込んで、新しいファイルを作成してくれます。

今回のサンプルバンドルを作成したので、参考にしてください。
http://dl.dropbox.com/u/603849/example.ruble-template.zip

テンプレート定義

テンプレートファイルの作成

templatesディレクトリの直下にテンプレートファイルを作成します。
テンプレートファイル名やテンプレートファイルは何でもかまわないです。

ここではHTML5のテンプレートファイルを作成します。
templatesディレクトリにテンプレートファイルを作成します。

[shell]
templates/html5_default_template.html
[/shell]

テンプレートの定義

次にテンプレートの定義ファイルを作成します。
テンプレート定義ファイルはtemplatesディレクトリの直下にtemplates.rbという名前で作成します。

スニペットと同様に最初にrubleモジュールを読み込みます。

[ruby]
require ‘ruble’
[/ruby]

そして肝心のテンプレート定義を記述します。
ここではテンプレート中のプレースフォルダーを環境変数で置換して結果をテンプレートの内容として返しています。
プレースフォルダーは${変数名}という形式でテンプレート内に記述します。

環境変数は下記のページに掲載されています。

環境変数一覧:
http://wiki.appcelerator.org/display/tis/Ruble+environment+variables

[ruby]
require ‘ruble’

template [template_name] do |tmpl|

template_file = “#{ENV['TM_BUNDLE_SUPPORT']}/../templates/[template_file_name]”

tmpl.filetype = [file_type]
tmpl.invoke do |context|
raw_contents = IO.read(template_file)
raw_contents.gsub(/\$\{([^}]*)\}/) { |match| ENV[match[2..-2]] }
end

end
[/ruby]

各項目は下記の通りになります。

最終的なテンプレート定義は下記の通りです。

[ruby]
require ‘ruble’

#HTML5 Template file
template ‘HTML5 Template file’ do |tmpl|
tmpl.filetype = ‘*.html’
tmpl.invoke do |context|
template_file = “#{ENV['TM_BUNDLE_SUPPORT']}/../templates/html5_default_template.html”
raw_contents = IO.read(template_file)
raw_contents.gsub(/\$\{([^}]*)\}/) { |match| ENV[match[2..-2]] }
end
end
[/ruby]

テンプレートの動作確認

バンドルのディレクトリからcache.yamlを削除して、Bundlesビューより再読み込みしてみます。
そして、ファイルメニューのNew From Templateからテンプレートを選択します。

無事テンプレートからファイルが作成され、プレースホルダーが置き換わっていたら完了です。
Similar Posts:

• Aptana3 Bundleを作成する – バンドル作成の準備
• concrete5でTinyMCEのテンプレートプラグインを使用する
• Aptana3 Bundleを作成する – スニペット作成
• Concrete5で翻訳ファイルを作る早いやり方
• Concrete5のテーマについての基礎知識

今回はスニペットの作成について解説します。
スニペットはよく使うコードの断片を挿入できる便利な機能です。
挿入位置はファイルのカーソル位置に挿入します。

今回のスニペットのサンプルを作成したので、興味のある人は解凍してbundlesディレクトリにおいてください。
メニューにExample Bundleと表示されるはずです。

スニペットサンプル:
http://dl.dropbox.com/u/603849/example.ruble-snippets.zip

スニペットファイルを作る

まず、スニペットを記述するファイルを作成します。
ファイル名はsnippets.rbもしくは、サフィックスが_snippets.rbとなる形にします。

ファイルはsnippetsディレクトリに格納します。

使い分けはスニペットが少ない場合と複数のスニペットを分割して管理したい場合とで分けるといいと思います。

例1 スニペットが少ない場合

snippets.rbを作成して、すべてのスニペットをこのファイルに記述します。
[shell]
/snippets/snippets.rb
[/shell]

例2 スニペットを分類して管理する場合

データベース、ビュー、その他などに分類する場合はファイルをそれぞれ分けて、ファイル名の最後が_snippets.rbになるようにします。

[shell]
/snippets/db_snippets.rb
/snippets/utils_snippets.rb
/snippets/view_snippets.rb
[/shell]

スニペットを記述する

スニペットファイルを開いて、コードを記述します。

モジュールの読み込み

ファイルの先頭に下記のコードを記述して、モジュールを読み込みます。

[ruby]
require ‘ruble’
[/ruby]

スニペットの定義

フォーマットは下記のような形になります。

[ruby]
snippet [name] do |s|
s.scope = [scope]
s.trigger = [trigger]
s.expansion = [expansion]
end
[/ruby]

それぞれの項目の説明は次のようになります。

スニペットの定義の例

次の例ではjavascriptファイルのみで有効な”Element inject”というスニペットを定義しています。
.injectとタイプしてTABキーを押すと、2つのプレースホルダー付でスニペットを挿入します。

[ruby]
snippet ‘Element inject’ do |s|
s.scope = ‘source.js’
s.trigger = ‘.inject’
s.expansion = ‘$(${1:element}).inject(${2:container});${0}’
end
[/ruby]

スニペット定義の応用

with_defaultsを利用するとスニペットにまとめてデフォルト値を設定することができます。

[ruby]
with_defaults :scope => ‘source.js’ do

snippet ‘inject’ do |s|
s.trigger = ‘.inject’
s.expansion = ‘\$(${1:element}).inject(${2:container});${0}’
end

snippet ‘adopt’ do |s|
s.trigger = ‘.adopt’
s.expansion = ‘\$(${1:container}).adopt(${2:elements});${0}’
end

end
[/ruby]

スニペットメニューの定義

メニューからスニペットを挿入できるようにするには、bundle.rbを編集してメニューを定義する必要があります。
フォーマットは下記のような形になります。

[ruby]
bundle.menu [bundle] do |main_menu|

main_menu.command [sunippet_name]

main_menu.separator

main_menu.menu [submenu] do |submenu|
submenu.command [sunippet_name]
submenu.separator
submenu.command [sunippet_name]
end

end
[/ruby]

コマンドの指定にはスニペットの名称を指定します。

[ruby]
main_menu.command [sunippet_name]
[/ruby]

メニューに区切りを線をいれたい場合はseparatorを指定します。

[ruby]
main_menu.separator
[/ruby]

サブメニューを作成したい場合はメインメニューと同じように作成します。

[ruby]
main_menu.menu [submenu] do |submenu|
submenu.command [sunippet_name]
submenu.separator
submenu.command [sunippet_name]
end
[/ruby]

スニペットメニューの例

下記の例ではExampleメニューの中に3つのスニペット挿入のメニューを定義しています。

[ruby]
bundle.menu ‘Example’ do |main_menu|

main_menu.command ‘example_snippet1′

main_menu.separator

main_menu.menu ‘example_snippet_list’ do |submenu|
submenu.command ‘example_snippet2′
submenu.separator
submenu.command ‘example_snippet3′
end

end
[/ruby]

メニューの階層は下記の通りになります。

[shell]
/Example
/example_snippet1
/example_snippet_list
/example_snippet2
/example_snippet3
[/shell]

スニペットの動作確認

Bundlesビューを開いて、対象のバンドル名を選択し、マウスを右クリックして、コンテキストメニューのReloadを選択します。
ツリーに定義したスニペットが表示されていれば、読み込みはできています。

定義したスニペットが有効なファイルを開いて、トリガー文字列を入力し、TABキーを押すとスニぺットが挿入されるはずです。

スニペットがうまく動かない場合は下記のことを試してみてください。

1. キャッシュファイルの削除

Aptana3は一度バンドルを読み込むとキャッシュファイルを作成するので、キャッシュを削除します。
キャッシュファイルのファイル名はcache.yamlです。

キャッシュファイルを削除したら、Bundlesビューを再読み込みしてみてください。

2. キャッシュファイルの削除とAptana3再起動

キャッシュファイルを削除して、再読み込みしてもうまく動かない場合は
もう一度キャッシュファイルを削除して、Aptana3を再起動してみてください。

これでうまく動くはずです。

次回はテンプレートの作成を解説します。

Similar Posts:

• Aptana3 Bundleを作成する – バンドル作成の準備
• Aptana3 Bundleを作成する – テンプレートの作成
• Snippely1.1がリリースされていた。
• AptanaにMarkdown Editerプラグインをインストールしてみた
• Concrete5のテーマについての基礎知識

開発自体は簡単で、スニペットを定義したり、コマンドを実行した時の処理を少しだけ書くだけです。
Rubyで開発したことがある人はすぐに作成できると思います。

今回はBundle作成の最初の作業を解説します。

ディレクトリの作成

作成するバンドル名の後に.rubleというサフィックスをつけたディレクトリを作成します。
たとえば、Zend Frameworkのバンドルを作成したい場合はzend-framwork.rubleやzend_framwork.rubleになります。

次にその直下にassets、snippets、commands、templates、libというディレクトリを作成します。

作成後はこのようなディレクトリ構造になります。

[shell]
/zend-framwork.ruble
/assets
/snippets
/commands
/templates
/lib
[/shell]

• assets – バンドルで利用する画像を格納するディレクトリ
• snippets – スニペット定義ファイルを格納するディレクトリ
• commands – コマンド定義ファイルを格納するディレクトリ
• templates – テンプレート定義ファイルやテンプレートファイルを格納するディレクトリ
• lib – バンドルで利用するライブラリを格納するディレクトリ

Bundle定義ファイルの作成

次にBundleの定義ファイルをScripting Studio 3: Ruble Programming Guideを元に作成します。
ファイルはrubyのソースファイルで、bundle.rbという名前でbundleディレクトリ直下に置きます。

コードは下記のようなコードを書きます。
[ruby]
require ‘ruble’

bundle do |bundle|

#バンドル名
bundle.display_name = ‘Zend Framework’

#バンドルの詳細
bundle.description = < Bundle for development with Zend Framework
END

#バンドルの作成者
bundle.author = ‘Noritka Horio‘

#バンドルの著作権
bundle.copyright = ‘Copyrights 2010-2011 Noritaka Horio All Rights Reserved’

#バンドルのリポジトリURL
bundle.repository = ‘https://holyshared@github.com/holyshared/zend-framework.ruble.git’

end
[/ruby]

Bundleの配置

定義ファイルが正しく読み込まれるか確認するために、一旦バンドルを適切なディレクトリの配置します。
配置するディレクトリはAptana Bundlesの直下です。

Windows XPの場合はAptana BundlesがMy Documentの直下にあると思います。
VistaやMacはちょっと分からないので、検索で探してもらうか、次のやり方でBundleディレクトリを指定することができます。

Bundleディレクトリの変更

ここの内容を参考にAptana Studio ConfigurationBundleディレクトリを変更します。

内容はAptanaStudio3.iniという設定ファイルに次のディレクトリの設定を追記します。

[text]
-Daptana.ruble.user.location=path/to/bundles
[/text]

最終的な設定ファイルはこんな感じになると思います。
[text]
–launcher.XXMaxPermSize
256m
-vmargs
-Xms40m
-Xmx384m
-Djava.awt.headless=true
-Daptana.ruble.user.location=C:/storage/aptana/bundles
[/text]

Bundleの読み込み確認

配置が無事完了したら、一旦Aptana3を再起動してください。
メニューのWindow -> Show View -> Other..よりAptana/Bundlesを選択してビューを表示します。

ビューにBundleが表示されれば読み込めています。

以上で下準備は完了です。
次回はスニペットを作成します。
Similar Posts:

• Aptana3 Bundleを作成する – テンプレートの作成
• Aptana3 Bundleを作成する – スニペット作成
• SkinnyMVCでユーザー認証モジュールを作る下準備
• Concrete5で翻訳ファイルを作る早いやり方
• Mootools Forgeで使用されているPluginsKitをインストールしてみた

Google Maps API Version 3からMVCObjectが追加されました。
Google Maps APIのマーカーやオーバーレイのベースになっている下位クラスです。

普段マーカーやストリートビューしかあまり使わないので、あまり気にしていなかったのですが、このクラスを継承してコントローラーやウィジットを作ると便利じゃないかと思ったので軽くご紹介します。
ちなみに自作のMootoolsプラグインMMap 0.2はMVCObjectを利用した設計に変更中です。
今は新しいバージョンのデモページを作成しています。

bindToメソッド

MVCObjectのbindToメソッドを利用すると、特定のオブジェクトのプロパティが変更された時、自分自身のプロパティに変更された値を反映させることができます。
たとえば、監視しているオブジェクトのvisibleプロパティが非表示(false)に変更された時、自分自身も同じように非表示にすることが可能です。

property_changed

MVCObjectのprototypeプロパティに[プロパティ名]_changedという名称でメソッドを定義すると、プロパティの変更があった場合に定義されたメソッドが実行される。
これを利用すると変更があった際に、ウィジットの表示などのへの反映が自動化できますし、表示の変更をイベントハンドリングで対応しなくてもよくなります。

イベントリスナー

MVCObjectのイベントリスナーにproperty_changedと指定してイベントリスナーを追加することでプロパティの変更をイベントハンドリングできるようになります。
これは自分の自作ウィジットなどのsetterメソッドでイベントを手動で発火させて、プロパティの変更があったことを他のオブジェクトへ通知するなどの処理が不要になります。

実際に試してみた結果が下記の通りです。
ボタンをクリックするとプロパティの変更があった場合にアラートを表示するようなものです。

解説した動きが再現されていると思います。
これをうまく活用すると、少ない工数で複雑なアプリケーションを作成することが可能です。
積極的に使っていこうと思います。

Similar Posts:

• MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。
• StaticMapsとMicroformat(hCalender)をセットで利用する
• MootoolsのForm.Validater.Extraについて
• MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。
• MootoolsとPowerToolsでPC、iPadに対応したギャラリーサイトのテンプレートを作りました。

Sumoは他のjavascriptフレームワークと一緒に利用することができます。

javascriptでページ内に埋め込まれているhCalenderを解析し、その結果を元に地図を描画します。
地図を表示する項目はMicroformat(hCalender)の位置情報のlocationプロパティと、より詳細な座標情報のgeoプロパティ、latitudeプロパティ、longitudeプロパティを利用します。

Sumoのデフォルトでは解析対象にhCalenderのgeoプロパティ、latitudeプロパティ、longitudeプロパティが解析対象に含まれていなかったので、別途解析対象にしました。
元のソースコードはDaniel MorrisonのSumoリポジトリにあります。

Microformatを利用したサンプルはMMapのデモページでも書いたのですが、一度記述しておけばテキストを修正するだけで対応が可能なのでメンテナンスが楽ですね。

javascriptでパースするので、無効にされていると動作しないのが厄介ですが、非常に便利なテクニックです。
Microformatのうまみは機械と人間にやさしいことと、再利用できることだと思っているので、もっと普及すればいいと思います。Similar Posts:

• MootoolsのプラグインStaticMaps0.1.1をリリースしました。
• MootoolsのForm.Validater.Extraについて
• MootoolsのForm.Validaterのプロパティを動的に指定する
• Google Maps API V3のMVCObjectについて
• iddy.jsをリリースしました。

その中で、package.yml(パッケージ定義ファイル)とソースヘッダーの話を書いたと思いますが、packager-webはビルドの際にこれらを参照し、ルールに則ってビルドを行います。
若干、Mootools Forgeの使い方 – 登録する前にすることで説明した内容のほかにファイルに記述する必要があります。

今回説明するパッケージ定義ファイルとソースヘッダーを記述したファイルを用意しましたので参考にしてください。
解凍して、componentsにアップロード、config.ymlの書き換えを行ってください。
packger-webにアップロードしたパッケージが表示されるはずです。

サンプルデータ
サンプルファイルのダウンロード

具体的な内容はおさらいをかねて再度説明します。

パッケージ定義ファイル(package.yml)の作成

1～8番までがpackagerで必要になる項目で9～14番がMootools Forgeで必要になる項目です。
packager-webだけの場合、1～8番までの記述でOKです。

実際のサンプルは下記のような感じになります。

[text]
#——————————————–
# Here is a section of Mootools Forge.
#——————————————–

name: Example Plugin Module

author: your forge username here

category: Interface

tags: [animation, canvas]

#docs: http://url.to.docs

#demo: http://url.to.demo

#current: 0.5

#——————————————–
# Here is a section of packager.
#——————————————–

exports: “plugin.js”

web: “[http://sharedhat.com](http://sharedhat.com)”

description: “This is plugin sample”

authors: “[Noritaka Horio](http://sharedhat.com)”

license: “[public domain](http://en.wikipedia.org/wiki/Public_domain)”

copyright: “© [Noritaka Horio](http://sharedhat.com)”

sources:
– “Source/Plugin.js”
– “Source/Plugin.ModuleA.js”
– “Source/Plugin.ModuleB.js”
– “Source/Plugin.ModuleC.js”
[/text]

ソースヘッダーの記述

ソースヘッダーはMootools Forgeの使い方 – 登録する前にすることで書いた通りです。
ここの記述は依存関係の解決に大きく影響するので注意が必要です。

実際のソースヘッダーは下記の通りになります。

[javascript]
/*
—
name: Plugin

description: This plugin is a sample.

license: public domain

authors:
- Noritaka Horio

requires:
– Core/Core
– Core/Array
– Core/String
– Core/Number
– Core/Function
– Core/Object
– Core/Event
– Core/Browser
– Core/Class
– Core/Class.Extras
– Core/Slick.Parser
– Core/Slick.Finder
– Core/Element
– Core/Element.Style
– Core/Element.Event
– Core/Element.Dimensions
– Core/Fx
– Core/Fx.Transitions
– More/Assets
– ImageDrawer/ImageDrawer
– ImageDrawer/ImageDrawer.Grid
– ImageDrawer/ImageDrawer.Expand

provides: Plugin

…
*/
[/javascript]

packager-webの設定ファイル変更

準備ができたら、packager-webのconfig.ymlを編集してpackagesに組み込みたいプラグインを追加します。

[text]
packages:
– “components/mootools-core/”
– “components/mootools-more/”
– “components/example-package/”
[/text]

これで、自作プラグインをpackager-webに組み込むことができます。
packager-webにアクセスして、問題なくプラグインが表示されていれば終了です。
簡単ですね。
Similar Posts:

• MootoolsのビルドツールPackager-Webはすごく便利
• Mootoolsのプラグイン「Exhibition.js」をリリースしました。
• MooTools 1.2リリース
• MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。
• Mootoolsをコマンドラインを使用してビルドする方法

具体的な症状は、マーカーが生成されDOMツリーに反映されているのにもかかわらず、地図上に表示されないというものです。
そんな時、Safariの開発ツールでDOMツリーを見ていると、少し気になる部分がありました。
それは、マーカーの表示位置です。
なんとleft値が-1.62986e+0006pxとか怪しい値になっていたのです。

これは、オーバーフローでもしてるのかな、と思いleft値を10とかに変更してみると無事表示されるようになりました。
なので、マーカーで表示されている範囲内のマーカー以外を非表示にするように修正を加えました。

以下が、実際のソースコードです。
displayMarkersがマーカーの表示制御部分です。

[javascript]
this.map = new google.maps.Map(this.element, {
zoom: this.options.zoom,
center: new google.maps.LatLng(this.options.latlng.lat, this.options.latlng.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

this.displayMarkers = function() {
//this.markersはマーカーをスタックしている配列
var bounds = this.map.getBounds();
for (var i = 0; l = this.markers.length – 1, i <= l; i++) {
var marker = this.markers[i];
var mp = marker.getPosition(); //LatLngオブジェクト
if (bounds.contains(mp)) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}

//中心点とズームレベルの監視
//変更が発生した場合は、マップに収まるマーカーだけを表示する
var changed = $.proxy(this.displayMarkers, this);
google.maps.event.addDomListener(this.map, 'center_changed', changed);
google.maps.event.addDomListener(this.map, 'zoom_changed', changed);
[/javascript]

これで問題解決です。Similar Posts:

• jQueryでGoogle Map API Version3のカスタムマーカーを作る
• MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。
• Google Map APIのStreetViewServiceを使用し、座標近くのストリートビューを表示する方法
• Mootools Plugin 「MMap」をリリースしました。
• MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。

まず、DooPHPのサイトから最新版をダウンロードしてきます。
この時点でバージョンは1.2でした。

フレームワークの解凍と動作確認

ダウンロードしたアーカイブを展開し、ドキュメントルートに配置します。
この段階で、DooPHPの基本アプリケーションとDooPHPでできているデモアプリケーションにアクセスできます。

デモアプリケーションへのアクセス

http://localhost/demos/uri_routing/

基本アプリケーションへのアクセス

http://localhost/app/
http://localhost/app/index.php

動作パスの変更(サブディレクトリ)

DooPHPはアプリケーションのディレクトリを自由にできるみたいなので、ためしに設定ファイルを書き換えて見ます。
動作を確認するために、demosディレクトリを削除し、appディレクトリをexmapleに変えます。

次に、exmapleディレクトリ内のprotected/config内のcommon.conf.phpを編集します。

編集する場所は、$config['SITE_PATH']、$config['BASE_PATH']、$config['SUBFOLDER']です。

編集内容

• $config['SITE_PATH']にexmapleディレクトリまでの絶対パスを指定します。
• $config['BASE_PATH']にdooframeworkディレクトリまでの絶対パスを指定します。
• $config['SUBFOLDER']にexmapleディレクトリを指定します。

編集後は下記のようになります。

[php]
//framework use, must defined, user full absolute path and end with / eg. /var/www/project/
$config['SITE_PATH'] = “C:/var/www/mercurial/doo/exmaple/”;
$config['BASE_PATH'] = “C:/var/www/mercurial/doo/dooframework/”;
$config['APP_MODE'] = ‘dev’; //for production mode use ‘prod’

//—————– optional, if not defined, default settings are optimized for production mode —————-
//if your root directory is /var/www/ and you place this in a subfolder eg. ‘app’, define SUBFOLDER = ‘/app/’

$config['SUBFOLDER'] = “/exmaple/”;
[/php]

これで、http://localhost/exmaple/にアクセスすると、基本アプリケーションが実行されるようになります。
これは、WordpressやMTのようなブログシステムが動いている場合に便利ですね。

動作パスの変更 – 直下置き

次に、サブフォルダを使用しない場合を試して見ます。
exampleディレクトリの中身をドキュメントルートに移動します。
移動が完了したら不要になったexampleディレクトリを削除します。

次にprotected/config内のcommon.conf.phpを編集します。

編集する場所は、$config['SITE_PATH']、$config['BASE_PATH']、$config['SUBFOLDER']です。

編集内容

• $config['SITE_PATH']にドキュメントルートまでの絶対パスを指定します。
• $config['SUBFOLDER']の部分を削除します。

[php]
//framework use, must defined, user full absolute path and end with / eg. /var/www/project/
$config['SITE_PATH'] = “C:/var/www/mercurial/doo/”;
$config['BASE_PATH'] = “C:/var/www/mercurial/doo/dooframework/”;
$config['APP_MODE'] = ‘dev’; //for production mode use ‘prod’

//—————– optional, if not defined, default settings are optimized for production mode —————-
//if your root directory is /var/www/ and you place this in a subfolder eg. ‘app’, define SUBFOLDER = ‘/app/’
$config['SUBFOLDER'] = “”;
[/php]

これで、http://localhost/にアクセスすると、基本アプリケーションが実行されるようになります。

以上でDooPHPのインストールと動作説明は終了です。

ここまでの、手順は下記のページ掲載されているので確認されることをお勧めします。
DooPHPのインストールのページSimilar Posts:

• Prosessing Clockの公開を開始しました。
• Mootools Forgeで使用されているPluginsKitをインストールしてみた
• SkinnyMVCをインストールしてみました。
• Mootools1.2.1リリース
• CodezineのDjangoチュートリアルをやってみた

座標と探す半径を指定するだけで、近くにストリートビューのポイントを簡単に探すことができます。

jsfiddleのサンプル

解説

ソースコードはこんな感じです。
[javascript]
var gStreetView = new google.maps.StreetViewPanorama($(“gStreetView”), {
heading: 34,
pitch: 1,
zoom: 1
});

//It looks for the point of the street view from specified coordinates position and radius.
var nearestLatLng = null, nearestPano = null;
var client = new google.maps.StreetViewService();

client.getPanoramaByLocation(point, radius, function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
var location = result.location;
nearestLatLng = location.latLng;

gStreetView.setPosition(nearestLatLng);
}
});

[/javascript]

まずはじめにStreetViewServiceをインスタンス化します。
[javascript]
var client = new google.maps.StreetViewService();
[/javascript]

次に、getPanoramaByLocationメソッドを実行します。
引数に座標、検索する半径(メートル)、コールバック関数をとります。
コールバック関数の引数には、結果と結果ステータスが引き渡されます。
後は、結果のステータスを判別して、ストリートビューの座標位置にセットしてあげるだけです。
簡単ですね。
[javascript]
client.getPanoramaByLocation(latlng, radius, callback);
[/javascript]

V3になってからストリートビューの座標位置がわからない人は参考にしてください。

StreetViewService
StreetViewServiceクラスのドキュメントはこちら<
Similar Posts:

• Safariで発生するマーカーが表示されない問題の対処法
• ちょっと気になるGoogle Sites
• SkinnyMVCでユーザー認証モジュールの画面フローを実装する
• MootoolsのGoogle Mapsプラグイン、MMap 0.2.1をリリースしました。
• Google Maps API V3のMVCObjectについて

MootoolsのMMapプラグインでカスタムマーカーを作成したので、jQueryで書いてみることにしました。

jQueryでGoogle Map API Version3のカスタムマーカーを作る – jsdo.it – share JavaScript, HTML5 and CSS

Overlayviewをサブクラス化することで、自分なりの使いやすいマーカーやインフォメーションウィンドウが作成できるので便利です。Similar Posts:

• Safariで発生するマーカーが表示されない問題の対処法
• Mootools Plugin 「MMap」をリリースしました。
• MootoolsのGoogle Mapsプラグイン、MMap0.2をリリースしました。
• MootoolsのプラグインStaticMaps0.1.1をリリースしました。
• Google Maps API V3のMVCObjectについて