ShowTable of Contents
概要
GoogleMapカスタムコントロールとは、マップ中心地、マーカー、サークルのプロパティを指定することで
XpageにGoogleMapを追加する事ができるカスタムコントロールである。
GoogleMapカスタムコントロールは、アップグレードパックには含まれておらず、OneNTFサイトより個別にダウンロードする必要がある。
ここでは、その適用方法とプロパティの内容について記述する。
ダウンロード先 URL: http://www.openntf.org/projects/pmt.nsf/ProjectLookup/Google%20Maps%20Custom%20Control
使用方法
1.カスタムコントロールの配置
XPage上でカスタムコントロールから[ccGoogleMaps]を表示させたい場所へドラッグする。
2.名前の入力
[プロパティ]-[カスタムコントロール]-[名前]にカスタムコントロール名に該当する「名前」を入力する。
3.GoogleMapカスタムコントロール のプロパティ設定
GoogleMapカスタムコントロールの[すべてのプロパティ]-[カスタム]で、「マップ中心地」、「マーカー」、「サークル」のプロパティを指定する。
各プロパティの詳細は、”（2）各プロパティの詳細情報”を参照。
4.ブラウザで確認
指定した内容のGoogle Mapのイメージをブラウザから確認する。
◆ブラウザイメージ
1.マップ中心地の情報設定
以下にマップ中心地の情報に関するプロパティ内容を記述する。
| プロパティ名 | 説明 |
| map_height | マップの高さを指定する。
プロパティ "map_width_heigh_measurement" に設定された値によって以下のように指定する。
・値が"ピクセル"の場合
ピクセル単位でマップの高さを指定
・値が"％"の場合
高さの割合を指定 |
| map_width | マップの幅を指定する。
プロパティ "map_width_height_measurement"に設定された値によって以下のように指定する。
・値が"ピクセル"の場合
ピクセル単位でマップの幅を指定
・値が"％"の場合
幅の割合を指定 |
| map_width_measurement | マップ幅の測定方法について、"ピクセル" または、"％"を指定する。 |
| map_height_measurement | マップの高さの測定方法について、"ピクセル" または、"％"を指定する。 |
| map_zoom | マップのズーム範囲を指定する。
0～18の数値で指定し、拡大された詳細マップを表示したい場合、大きな数値を指定する。
◆補足
（3）参考図 - 図1(a)～(b).を参照 |
| map_type | マップタイプを次のように指定する。
・ROADMAP
・SATELLITE
・HYBRID
・TERRAIN
◆補足
（3）参考図 - 図２(a)～(d).を参照 |
| map_center_type | マップ中心地の指定方法を、次のように指定する。
・Adress ＝ 住所
・Coordinates ＝ 座標 |
| map_center_latitude | マップ中心地の緯度を指定する。
プロパティ"map_center_type"で、Coordinatesを指定した場合、
表示する中心地座標の緯度を、次のように指定する。
・北緯 ＝ 正数 （例：36.5）
・南緯 ＝ 負数 （例：-36.5） |
| map_center_longitude | マップ中心地の経度を指定する。
プロパティ”map_center_type”で、Coordinatesを指定した場合、
表示する中心地座標の経度を、次のように指定する。
・東経 ＝ 正数 （例：135.5）
・西経 ＝ 負数 （例：-135.5） |
| map_center_address | マップ中心地の住所を指定する。
プロパティ”map_center_type”で、Adressを指定した場合、
表示する中心地の住所を指定する。 |
2. マーカー情報の設定
以下にマップに表示するマーカーに関するプロパティ内容を記述する。
◆補足
（3）参考図 - 図３(a)～(b).を参照。
| プロパティ名 | 説明 |
| title | マーカー上にマウスを移動した際に、表示させたいタイトルを指定する。 |
| infotext | マーカーをクリックした際に、表示させたい情報の内容を指定する。 |
| icon | マーカーの種類を指定する。
デフォルトのGoogleMapsのマーカーを表示する場合は空を指定し、
カスタムマーカーが必要な場合は、イメージリソースを指定する。 |
| location_address | マーカーの住所を指定する。
プロパティ”location_type”で、Adressを指定した場合、
表示するマーカーの住所を指定する。 |
| animation | マーカーのアニメーションを指定する。
マーカーにアニメーションを追加したい場合、次のように指定する。
・DROP
・BOUNCE |
| location_type | マーカーの中心地の指定方法を、次のように指定する。
・Adress ＝ 住所
・Coordinates ＝ 座標 |
| location_latitude | マーカーの緯度を指定する。
プロパティ”location_type”で、Coordinatesを指定した場合、
表示するマーカーの座標の緯度を指定する。
・北緯 ＝ 正数 （例：36.5）
・南緯 ＝ 負数 （例：-36.5） |
| location_longitude | マーカーの経度を指定する。。
プロパティ”location_type”で、Coordinatesを指定した場合、
表示するマーカーの座標の経度を指定する。
・東経 ＝ 正数 （例：135.5）
・西経 ＝ 負数 （例：-135.5） |
3. サークル情報の設定
以下にマップに表示するサークルに関するプロパティ内容を記述する。
◆補足
（3）参考図 - 図３(a)～(b).を参照。
| プロパティ名 | 説明 |
| center_address | サークルの住所を指定する。
プロパティ”center_type”で、Adressを指定した場合、
表示するサークルの住所を指定する。 |
| center_latitude | サークルの緯度を指定する。
プロパティ”center_type”で、Coordinatesを指定した場合、
表示するサークルの座標の緯度を指定する。
・北緯 ＝ 正数 （例：36.5）
・南緯 ＝ 負数 （例：-36.5） |
| center_longitude | サークルの経度を指定する。
プロパティ”center_type”で、Coordinatesを指定した場合、
表示するサークルの座標の経度を指定する。
・東経 ＝ 正数 （例：135.5）
・西経 ＝ 負数 （例：-135.5） |
| center_type | サークルの中心地の指定方法を、次のように指定する。
・Adress ＝ 住所
・Coordinates ＝ 座標 |
| fillColor | サークルの塗潰し色を指定する。 |
| fillOpacity | サークルの塗潰し色の透明度を指定する。
０．０～１．０の数値を指定し、不透明なサークルを表示したい場合、大きな数値を指定する。 |
| radius | サークルの半径について、メートル単位で数値を指定する。 |
| strokeColor | サークルの円周の色を指定する。 |
| strokeOpacity | サークルの円周の色の透明度を指定する。
０．０～１．０の数値を指定し、不透明な円周を表示したい場合、大きな数値を指定する。 |
| strokeWeight | サークルの円周の太さをピクセル単位で指定する。 |
| visible | サークルの表示について、表示したい場合は”true”を
非表示にしたい場合には”false”をする。 |
1. マップ中心地の情報設定
以下に、マップ中心地の情報設定後のイメージを添付する。
図1(a)．ズームプロパティ（map_zoom = ”４”）
図1(b)．ズームプロパティ（map_zoom = ”１２”）
図2(a)．マップタイプ（map_type = ”ROADMAP”）
図2(b)．マップタイプ（map_type = ”SATELLITE”）
図2(c)．マップタイプ（map_type = ”HYBRID”）
図2(d)．マップタイプ（map_type = ”TERRAIN”）
2. マーカー、サークル情報の設定
以下に、マーカー・サークル情報設定後のイメージを添付する。
図3-(a)．マーカー、サークルのプロパティ設定例
図3-(b)．マーカー、サークルのイメージ（設定内容は、図３-(a)）
参考サイト
調査環境
Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Google Chrome 19.0.1084.46 m
Mozilla Firefox 12
Safari 5.1.5
この記事は九州地区ノーツパートナー会技術部会(リコー IT ソリューションズ 株式会社)によって作成されました。