{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42396,"path":"platform-user-interface/scripting-for-map-pages.md","title":"Scripting for map pages","bundle":null,"doc_type":null,"release":"australia","body":"\n# Scripting for map pages\n\nThe Script field on the Map Page form allows the use of attributes or custom code to define map characteristics, such as marker appearance, display information, and more.\n\n## Scripting map item attributes\n\nThe following attributes are available.\n\n**Note:** To create an item on the map, use the map.addItem\\(glideRecord\\) method. Pass a valid GlideRecord to **addItem\\(\\)**.\n\n|Attribute|Description|\n|---------|-----------|\n|name|Name used for identification.|\n|latitude|If you define an address, latitude is not necessary.|\n|longitude|If you define an address, longitude is not necessary.|\n|icon|URL of the icon to display for the marker. If a custom icon is not specified, the default Google marker is used.|\n|icon\\_width|Width of the icon. The default is 32.|\n|icon\\_height|Height of the icon. The default is 32.|\n|table\\_name|Table whose records display when the marker icon is clicked. Used with the **sys\\_id** attribute.|\n|sys\\_id|Sys\\_id of the record that displays when the marker icon is clicked. Used with the **table\\_name** attribute.|\n|view|View of the form displayed in the dialog box when the marker icon is clicked.|\n|html|Arbitrary HTML code for the pop-up window. If used, this value overrides the dialog box.|\n|marker\\_label|Optional marker icon label text.|\n|label\\_offset\\_left|Optional attribute that is used with **marker\\_label** to define the horizontal position of the marker label. The default is 0.|\n|label\\_offset\\_top|Optional attribute that is used with **marker\\_label** to define the vertical position of the marker label. The default is 0.|\n\n## Scripting custom map page behavior for smartphone\n\nIf you plan to access the map page from a smartphone, you may want to set custom smartphone interface behavior using the **isMobile** variable. You can use the **isMobile** variable to set custom behavior for the smartphone view of the map. For example, you might set different values for the **icon\\_width** and **icon\\_height** attributes when **isMobile** is true.\n\n## Basic map page script\n\nThis script displays all active, critical incident locations.\n\n```\n//setup new GlideRecord query on the incident table\nvar now_GR = new GlideRecord(\"incident\");\n//add condition for priority 1\ngr.addQuery('priority', '1');\n//add condition for active incidents\ngr.addActiveQuery();\n//execute the query\ngr.query();\n \n//loop through the list of incidents returned by the query\nwhile (gr.next()) {\n \n //create a new map item to display - linked to the current incident record\n var item = map.addItem(now_GR);\n //add the latitude value from the incident's location\n item.latitude = gr.location.latitude;\n //add the longitude value from the incident's location\n item.longitude = gr.location.longitude;\n //link to the icon image\n item.icon = \"http://maps.google.com/mapfiles/kml/pal3/icon51.png\";\n //set the icon size\n item.icon_width = \"16\";\n item.icon_height = \"16\";\n}\n```\n\n## isMobile map page script\n\nThis script displays all active, critical incident locations with custom settings for smartphone users.\n\n```\n//setup new GlideRecord query on the incident table\nvar now_GR = new GlideRecord(\"incident\");\n//add condition for priority 1\ngr.addQuery('priority', '1');\n//add condition for active incidents\ngr.addActiveQuery();\n//execute the query\ngr.query();\n \n//loop through the list of incidents returned by the query\nwhile (gr.next()) {\n \n //create a new map item to display - linked to the current incident record\n var item = map.addItem(now_GR);\n //add the latitude value from the incident's location\n item.latitude = gr.location.latitude;\n //add the longitude value from the incident's location\n item.longitude = gr.location.longitude;\n //link to the icon image\n item.icon = \"http://maps.google.com/mapfiles/kml/pal3/icon51.png\";\n \n //set the icon size (use smaller icons for smartphone users)\n if (isMobile) {\n   item.icon_width = \"12\";\n   item.icon_height = \"12\";\n }\n else { \n   item.icon_width = \"16\";\n   item.icon_height = \"16\";\n }\n}\n```\n\n## Advanced map page script\n\nThis script displays the number of open incidents by location. It varies the size of the icon based on the number of open incidents for the location. Using the html parameter, it also displays the location name and number of incidents, as well as a link to the list of related incidents.\n\n```\n//get the instances url so we can link back to it\nvar uri = gs.getProperty(\"glide.servlet.uri\");\n//create an aggregate query on the incident table\nvar count = new GlideAggregate('incident');\n//set condition for active incidents\ncount.addQuery('active', 'true');\n//set aggregate field to location to get count by location\ncount.addAggregate('COUNT', 'location');\n//execute the query\ncount.query();\n \n//loop through the results\nwhile (count.next()) {\n \n //get the current record's location\n var loc = count.location;\n //get the count of incidents for this location\n var locCount = count.getAggregate('COUNT', 'location');\n //only display location is there are active incidents\n if (locCount > 0) {\n //create new new map item for this location\n var item = map.addItem(count);\n //set lat/long from the location record\n item.latitude = loc.latitude;\n item.longitude = loc.longitude;\n //build the link to the list of incidents for the location\n var link = 'href=' + uri + 'incident_list.do?sysparm_query=active%3Dtrue^location%3D' + loc;\n //build the html value to be displayed when you click the map icon\n item.html='<a ' + link + '>' + loc.getDisplayValue() + ' (' + locCount + ')</a>';\n //link to the icon image\n item.icon = \"http://maps.google.com/mapfiles/kml/pal3/icon51.png\";\n //set the size of the icon based on the number of active incidents\n if (locCount < 5) {\n item.icon_width = \"12\";\n item.icon_height = \"12\";\n }\n else if (locCount < 15) {\n item.icon_width = \"16\";\n item.icon_height = \"16\";\n }\n else {\n item.icon_width = \"32\";\n item.icon_height = \"32\";\n }\n }\n}\n```\n\n## Map page marker label script\n\nMarker labels allow you to add dynamic text to markers. This example displays the active incident count at each location.\n\n```\n//get the instances url so we can link back to it\nvar uri = gs.getProperty(\"glide.servlet.uri\");\n//create an aggregate query on the incident table\nvar count = new GlideAggregate('incident');\n//set condition for active incidents\ncount.addQuery('active', 'true');\n//set aggregate field to location to get count by location\ncount.addAggregate('COUNT', 'location');\n//execute the query\ncount.query();\n \n//loop through the results\nwhile (count.next()) {\n \n //get the current record's location\n var loc = count.location;\n //get the count of incidents for this location\n var locCount = count.getAggregate('COUNT', 'location');\n //only display location is there are active incidents\n if (locCount > 0) {\n //create new new map item for this location\n var item = map.addItem(count);\n //set lat/long from the location record\n item.latitude = loc.latitude;\n item.longitude = loc.longitude; \n \n //create a marker label with the count\n item.marker_label = locCount;\n //define label offset for proper position\n item.label_offset_left = -4;\n item.label_offset_top = -20;\n \n //option to define table and record for label hyperlink\n //setting table and sys_id will override the use of html parameter\n //item.table = 'cmn_location';\n //item.sys_id = loc;\n \n //build the link to the list of incidents for the location\n var link = 'href=' + uri + 'incident_list.do?sysparm_query=active%3Dtrue^location%3D' + loc;\n //build the html value to be displayed when you click the map icon\n item.html='<a ' + link + '>' + loc.getDisplayValue() + ' (' + locCount + ')</a>';\n \n //link to the icon image\n item.icon = \"images/red_marker.png\";\n //set the size of the icon based on the number of active incidents\n item.icon_width = 24;\n item.icon_height = 24;\n \n }\n}\n```\n\n**Parent Topic:**[Map pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/c_MapPages.md)\n\n**Related topics**  \n\n\n[Set up Google Maps API]()\n\n[Create a map page]()\n\n[Create a map page module]()\n\n[Create an advanced Map Page]()\n\n[Set map application scope]()\n\n[Create a smartphone map page module]()\n\n"}}