Rakuten

  • 楽天ダウンロード

おすすめ本

天気予報

最近のトラックバック

  • event (夢茶爺&苦茶爺のPC奮戦備忘録)

カウンタ

VC

admax

カテゴリ「GoogleMap API」の11件の記事 Feed

2011年7月29日 (金)

「GoogleMap API V3」 の使い方その11(さらにInfowindow)

Infowindowの大きさ設定

以前の記事の中でInfowindowを使って単なる文字列の表示を行ったことがありましたが、 このブログをご覧の方で、「リンクが貼れればいいのに」との感想がどこかにありました。 そこで、今回はそのリンクと併せて、Infowindowの大きさ設定のことについて記事を書きます。

Infowindowにはオプションとして指定できる大きさの引数としてはmaxWidthしかなく、 高さ指定がありません。 Infowindowに表示する内容としてのcontentに縦に長いものを渡すと 縦方向は適当に内部で処理してくれているようです。以下にその例を示します。 (尚、縦に長すぎてmapの縦に収まらない場合はスクロールバーが表示されます)




DIVタグによるInfowindowの大きさ設定

Infowindowのcontentの内容をDIVタグを使って囲み、DIVのCSS宣言でwidthとheightを設定すれば 表示ウインドウの大きさが指定できます。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)

2011年6月 3日 (金)

「GoogleMap API V3」 の使い方その10(ルート検索2)

ルート検索の結果をルートレンダラで表示

「その9」の例では、ポリラインを使ってルート検索結果を描画しましたが、 ルートレンダラを使えばそんな面倒なことはしなくても簡単に描画することができます。

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。 ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。 コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、ルートレンダラのsetDirectionsメソッドにresultsを渡すことで、ルートが描画されます。
results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。



■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年6月 1日 (水)

「GoogleMap API V3」 の使い方その9(ルート検索)

住所文字列からルート検索し、ルート描画

文字列の住所からルート検索を行い、そのルートをマップに表示します。

ルートのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。 ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。 コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。

statusがOKの場合、resultsはDirectionsResult オブジェクトの配列として返されてきます。 返された配列の0番目の値にルート検索が入っています。 results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。 これを使ってポリラインを表示してやれば、マップ上にルートが描画されます。




■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月31日 (火)

「GoogleMap API V3」 の使い方その8(ジオコーディング)

ジオコーディングより住所文字列から緯度・経度を取得

ジオコーディングを使って、文字列の住所から緯度・経度を取得し、その位置にマーカーを表示します。

ジオコーディングのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [Geocode]ボタンをクリックされた時に、ジオコーディングの geocode メソッドを利用してジオコーディングのリクエストを行います。 ジオコーディング化の結果はgeocode メソッドで宣言された、コールバック関数に帰ってきます。

コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、resultsはGeocoderResultオブジェクトの配列として返されてきます。 返された配列の0番目の値にジオコーディング結果が入っています。 results[0]のプロパティとしてaddress_components、geometry、typesがありますが、緯度・経度の値はgeometryのlocationを参照します。


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月30日 (月)

「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)

マップ上にポリライン・ポリゴンを表示

マップ上にポリライン(折れ線)及び、ポリゴン(多角形)を表示します。
ポリラインを表示するにはPolylineクラスを生成し、それをマップ上に設定します。 また、ポリゴンを表示するにはPolygonクラスを生成し、それをマップ上に設定します。

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。 ポリゴンは内部を薄い色で塗りつぶしを行います。


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月27日 (金)

「GoogleMap API V3」 の使い方その6(続々イベント)

マップのイベントとマーカーのイベントの複合的な使い方

マップ上でクリックした位置にマーカーを表示し、さらにそのマーカーをクリックした時に マーカーの緯度経度の値を情報ウインドウに表示します。

この例は、Googleのサンプルとして乗っているものを変更したものです。
マップ上でのクリックイベント時の関数を設定し、その中でマーカーを生成し、さらに情報ウインドウの表示を 行うように、マーカーのクリックイベント時の関数を設定しています。

また、マーカーを生成した時に、そのマーカーをグローバル変数の配列に保存し、その配列のマーカーを 使って、再表示、クリア、削除処理を行っています。
マップ上をクリックするとマーカーを表示します。
さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。

     


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

「GoogleMap API V3」 の使い方その5(続イベント)

マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、 クリックイベントの関数の中でその情報ウインドウを表示する様にしています。





複数のマーカーイベントで情報ウインドウを表示

「使い方その3(マーカーの表示)」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときに それぞれのマーカーの内容を表示する例を示します。


最初の例で説明しましたイベントの処理とは、少し変わった部分があります。 先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。 これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。 これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。 各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられて クリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったまま になっています。それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月26日 (木)

「GoogleMap API V3」 の使い方その4(イベント)

マップのイベント

マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。

「google.maps.event」の「addListener」メソッドを使って、イベントリスナーを登録します。 「addListener」の引数について

addListener(instance, eventName, handler)

引数タイプ内容
instance Object 対象オブジェクトのインスタンス
(例ではマップなので gmap を渡す)
eventName string イベント名
('click','dblclick','mouseup','mousedown','mouseover','mouseout'等)
handler function リスナ関数
(例の様に直接宣言するか、別に関数を宣言しその名前を指定)

この例のリスナ関数の引数は、MouseEventのオブジェクトが返されてきます。 引数の名前を「event」としましたが、分かりやすい識別名を宣言します。 「event」のオブジェクトには、タイプが「LatLng」のプロパティ「latLng」が存在します。 それでタイプ「LatLng」の緯度取得メソッドである「lat()」を使って、緯度を取得します。






マーカーのイベント

マーカーをクリックしたときに、アラートを表示する簡単な例を示します。


マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、 ブラウザによって返されるeventオブジェクトのプロパティが異なるため、 これを利用することはないと思われます。

もし、マーカーの緯度経度を取得するのであれば、以下の様に位置(緯度経度)取得メソッドを使用します。
補足説明ですが、「this」キーワードは、実行中のコードが「自分自身」を表すオブジェクトにアクセスするもので、 この場合では、functionを持っているマーカーオブジェクトを指し示し、マーカーオブジェクトが 持っているメソッドをアクセスすることができます。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月25日 (水)

「GoogleMap API V3」 の使い方その3(マーカーの表示)

簡単なマーカーの表示
前回の地図の上に、簡単なマーカーを表示したいと思います。

マーカーを表示するときは、最初にマップを生成します。その後、マーカーを生成し、マーカーをマップに関連付けて表示させます。
マーカーのオプションに「title: "maker-test"」を指定していますので、マーカーのところにカーソルを持っていくと "maker-test"のロールオーバーが表示されます。

マーカークラスについて詳しくは以下のURLを参照してください。
Marker クラス
尚、「setMap」を使わなくても、以下の様にオプションで一括で指定しても同じことができます。(マーカーの生成部分のみ抜粋)





複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。今回は5個の適当な緯度・経度のマーカーの表示を行います。


次回はイベントを取り上げたいと思います。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)

2011年5月23日 (月)

「GoogleMap API V3」 の使い方その2

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。



mapTypeControl(地図の種別切り替え)

マップタイプコントロールの詳細を指定したい場合は、mapTypeControlをtrueにし、mapTypeControlOptionsの設定を行います。
mapTypeControlOptionsにはposition、style等のオプションがあります。それぞれの設定値は以下の通りです。

positionの設定は、以下のControlPositionクラスの定数値を用います。

定数内容
TOP 上中央
TOP_LEFT 左上
TOP_RIGHT 右上
LEFT
RIGHT
BOTTOM 下中央
BOTTOM_LEFT 左下(Google ロゴの右側)
BOTTOM_RIGHT 右下(著作権の左側)

styleの設定は、以下のMapTypeControlStyleクラスの定数値を用います。

定数内容
DEFAULT デフォルトのマップ タイプ コントロール
DROPDOWN_MENU ドロップダウン メニュー
HORIZONTAL_BAR 水平ラジオ ボタン バー

navigationControl(拡大縮小のナビ)

拡大縮小のナビの詳細を指定したい場合は、navigationControlをtrueにし、navigationControlOptionsの設定を行います。

styleの設定は、以下のNavigationControlStyleクラスの定数値を用います。

定数内容
ANDROID 小さいズーム コントロール(Androidのマップソフトに似ている)
DEFAULT デフォルトのナビゲーション コントロール
SMALL ズームのみのナビゲーション コントロール
ZOOM_PAN ズーム スライドと双方向の移動パッド

scaleControl(縮尺)

縮尺の詳細を指定したい場合は、scaleControlをtrueにし、scaleControlOptionsの設定を行います。

styleの設定は、以下のScaleControlStyleクラスの定数値を用います。 定数値としては現状、「DEFAULT」しかないので、これを指定しなくても問題ありません。


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)