マップページのスクリプティング

マップページフォームの [スクリプト] フィールドでは、属性またはカスタムコードを使用して、マーカーの外観、表示情報などのマップ特性を定義できます。

マップアイテム属性のスクリプティング

次の属性を使用できます。

注:

マップ上にアイテムを作成するには、 map.addItem(glideRecord) メソッドを使用します。有効な GlideRecord を addItem() に渡します。

属性	説明
名前	識別に使用される名前。
緯度	住所を定義する場合、緯度は必要ありません。
経度	住所を定義する場合、経度は必要ありません。
アイコン	マーカーに表示するアイコンの URL。カスタムアイコンが指定されていない場合は、デフォルトの Google マーカーが使用されます。
icon_width	アイコンの幅。デフォルトは 32 です。
icon_height	アイコンの高さ。デフォルトは 32 です。
table_name	マーカーアイコンがクリックされたときにレコードが表示されるテーブル。sys_id 属性とともに使用します。
sys_id	マーカーアイコンがクリックされたときに表示されるレコードのSys_id。table_name 属性とともに使用します。
表示	マーカーアイコンがクリックされたときにダイアログボックスに表示されるフォームのビュー。
html	ポップアップウィンドウの任意の HTML コード。使用すると、この値がダイアログボックスを上書きします。
marker_label	オプションのマーカーアイコンラベルテキスト。
label_offset_left	マーカーラベルの水平位置を定義するために marker_label で使用されるオプションの属性。デフォルトは 0 です。
label_offset_top	マーカーラベルの垂直位置を定義するために marker_label で使用されるオプションの属性。デフォルトは 0 です。

スマートフォンのカスタムマップページの動作のスクリプティング

スマートフォンからマップ ページにアクセスする場合は、 isMobile 変数を使用してスマートフォン インターフェイスのカスタム動作を設定することができます。isMobile変数を使用して、マップのスマートフォン ビューのカスタム動作を設定できます。たとえば、isMobile が true の場合、icon_width 属性と icon_height 属性に異なる値を設定できます。

基本マップページスクリプト

このスクリプトは、すべてのアクティブな重大なインシデントの場所を表示します。

//setup new GlideRecord query on the incident table
var now_GR = new GlideRecord("incident");
//add condition for priority 1
gr.addQuery('priority', '1');
//add condition for active incidents
gr.addActiveQuery();
//execute the query
gr.query();
 
//loop through the list of incidents returned by the query
while (gr.next()) {
 
 //create a new map item to display - linked to the current incident record
 var item = map.addItem(now_GR);
 //add the latitude value from the incident's location
 item.latitude = gr.location.latitude;
 //add the longitude value from the incident's location
 item.longitude = gr.location.longitude;
 //link to the icon image
 item.icon = "http://maps.google.com/mapfiles/kml/pal3/icon51.png";
 //set the icon size
 item.icon_width = "16";
 item.icon_height = "16";
}

isMobile マップページスクリプト

このスクリプトは、スマートフォンユーザー向けのカスタム設定で、すべてのアクティブな重大なインシデントの場所を表示します。

//setup new GlideRecord query on the incident table
var now_GR = new GlideRecord("incident");
//add condition for priority 1
gr.addQuery('priority', '1');
//add condition for active incidents
gr.addActiveQuery();
//execute the query
gr.query();
 
//loop through the list of incidents returned by the query
while (gr.next()) {
 
 //create a new map item to display - linked to the current incident record
 var item = map.addItem(now_GR);
 //add the latitude value from the incident's location
 item.latitude = gr.location.latitude;
 //add the longitude value from the incident's location
 item.longitude = gr.location.longitude;
 //link to the icon image
 item.icon = "http://maps.google.com/mapfiles/kml/pal3/icon51.png";
 
 //set the icon size (use smaller icons for smartphone users)
 if (isMobile) {
   item.icon_width = "12";
   item.icon_height = "12";
 }
 else { 
   item.icon_width = "16";
   item.icon_height = "16";
 }
}

詳細マップページスクリプト

このスクリプトは、オープンインシデントの数を場所別に表示します。場所のオープンインシデントの数に基づいて、アイコンのサイズが変わります。html パラメーターを使用すると、場所の名前とインシデントの数、および関連するインシデントのリストへのリンクも表示されます。

//get the instances url so we can link back to it
var uri = gs.getProperty("glide.servlet.uri");
//create an aggregate query on the incident table
var count = new GlideAggregate('incident');
//set condition for active incidents
count.addQuery('active', 'true');
//set aggregate field to location to get count by location
count.addAggregate('COUNT', 'location');
//execute the query
count.query();
 
//loop through the results
while (count.next()) {
 
 //get the current record's location
 var loc = count.location;
 //get the count of incidents for this location
 var locCount = count.getAggregate('COUNT', 'location');
 //only display location is there are active incidents
 if (locCount > 0) {
 //create new new map item for this location
 var item = map.addItem(count);
 //set lat/long from the location record
 item.latitude = loc.latitude;
 item.longitude = loc.longitude;
 //build the link to the list of incidents for the location
 var link = 'href=' + uri + 'incident_list.do?sysparm_query=active%3Dtrue^location%3D' + loc;
 //build the html value to be displayed when you click the map icon
 item.html='<a ' + link + '>' + loc.getDisplayValue() + ' (' + locCount + ')</a>';
 //link to the icon image
 item.icon = "http://maps.google.com/mapfiles/kml/pal3/icon51.png";
 //set the size of the icon based on the number of active incidents
 if (locCount < 5) {
 item.icon_width = "12";
 item.icon_height = "12";
 }
 else if (locCount < 15) {
 item.icon_width = "16";
 item.icon_height = "16";
 }
 else {
 item.icon_width = "32";
 item.icon_height = "32";
 }
 }
}

マップページマーカーラベルスクリプト

マーカーラベルを使用すると、動的なテキストをマーカーに追加できます。この例では、各場所でのアクティブなインシデント数を表示します。

図 : 1. マップマーカーラベル

//get the instances url so we can link back to it
var uri = gs.getProperty("glide.servlet.uri");
//create an aggregate query on the incident table
var count = new GlideAggregate('incident');
//set condition for active incidents
count.addQuery('active', 'true');
//set aggregate field to location to get count by location
count.addAggregate('COUNT', 'location');
//execute the query
count.query();
 
//loop through the results
while (count.next()) {
 
 //get the current record's location
 var loc = count.location;
 //get the count of incidents for this location
 var locCount = count.getAggregate('COUNT', 'location');
 //only display location is there are active incidents
 if (locCount > 0) {
 //create new new map item for this location
 var item = map.addItem(count);
 //set lat/long from the location record
 item.latitude = loc.latitude;
 item.longitude = loc.longitude; 
 
 //create a marker label with the count
 item.marker_label = locCount;
 //define label offset for proper position
 item.label_offset_left = -4;
 item.label_offset_top = -20;
 
 //option to define table and record for label hyperlink
 //setting table and sys_id will override the use of html parameter
 //item.table = 'cmn_location';
 //item.sys_id = loc;
 
 //build the link to the list of incidents for the location
 var link = 'href=' + uri + 'incident_list.do?sysparm_query=active%3Dtrue^location%3D' + loc;
 //build the html value to be displayed when you click the map icon
 item.html='<a ' + link + '>' + loc.getDisplayValue() + ' (' + locCount + ')</a>';
 
 //link to the icon image
 item.icon = "images/red_marker.png";
 //set the size of the icon based on the number of active incidents
 item.icon_width = 24;
 item.icon_height = 24;
 
 }
}

関連タスク

• Google Maps API の設定
• マップページの作成
• マップページモジュールの作成
• 詳細マップページの作成
• マップアプリケーションスコープの設定
• スマートフォンマップページモジュールの作成