---
sourceDocument: Yokohama ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Scripting for map pages

# Scripting for map pages {#ariaid-title1}

Release version: Yokohama  
Updated January 30, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Scripting for map pages

The Script field on the Map Page form in ServiceNow enables you to customize map behavior using attributes and custom code.
This allows you to define marker appearances, display information, and interactive elements on map pages.
Scripting map pages is essential for visualizing data such as incident locations and counts directly on maps, enhancing spatial awareness and operational insights.
Show full answer Show less  

## Key Features

* **Map Item Attributes:** You can configure marker details including `name`, `latitude`, `longitude`, `icon`, icon dimensions, associated `tablename` and `sysid` for clickable records, custom `html` pop-ups, and marker labels with position offsets.
* **Adding Items to Map:** Use the `map.addItem(glideRecord)` method to create map markers linked to records.
* **Mobile Customization:** Use the `isMobile` variable to tailor map page behavior and marker icon sizes for smartphone users, ensuring optimal display and usability on smaller screens.
* **Basic Scripting Example:** Displays active, critical (priority 1) incidents on the map with custom icons and sizes.
* **Advanced Scripting Example:** Aggregates open incidents by location, varies marker icon size based on incident count, and shows clickable HTML pop-ups with links to incident lists.
* **Marker Labels:** Enables dynamic text labels on markers, such as displaying the count of active incidents per location, with configurable label positioning and interactive links.

## Practical Application for ServiceNow Customers

By leveraging these scripting capabilities, you can:

* Visualize critical incident locations and their severity dynamically on maps.
* Create intuitive and interactive map pages that display real-time data aggregated by location.
* Customize map marker icons and labels to convey meaningful information at a glance.
* Improve mobile user experience by adjusting map behavior and marker sizes for smartphones.
* Enable users to click on markers to view detailed records or related lists, streamlining navigation and incident management.

## Next Steps

* Use the provided scripting examples as templates to build custom map pages reflecting your organization's data needs.
* Define map item attributes and aggregate queries to tailor marker displays and pop-up content.
* Configure smartphone-specific map behavior with the `isMobile` variable for responsive design.
* Explore related tasks such as setting up the Google Maps API, creating map page modules, and configuring application scopes to fully implement your map pages.  
The 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.

## Scripting map item attributes

The following attributes are available.  
Note:  
To create an item on the map, use the map.addItem(glideRecord) method. Pass a valid GlideRecord to addItem().
{#scripting-for-map-pages__table_a3s_kr5_cr__entry__2}

| Attribute | Description |
|-|-|
| name | Name used for identification. |
| latitude | If you define an address, latitude is not necessary. |
| longitude | If you define an address, longitude is not necessary. |
| icon | URL of the icon to display for the marker. If a custom icon is not specified, the default Google marker is used. |
| icon_width | Width of the icon. The default is 32. |
| icon_height | Height of the icon. The default is 32. |
| table_name | Table whose records display when the marker icon is clicked. Used with the sys_id attribute. |
| sys_id | Sys_id of the record that displays when the marker icon is clicked. Used with the table_name attribute. |
| view | View of the form displayed in the dialog box when the marker icon is clicked. |
| html | Arbitrary HTML code for the pop-up window. If used, this value overrides the dialog box. |
| marker_label | Optional marker icon label text. |
| label_offset_left | Optional attribute that is used with marker_label to define the horizontal position of the marker label. The default is 0. |
| label_offset_top | Optional attribute that is used with marker_label to define the vertical position of the marker label. The default is 0. |
[ ]

{#scripting-for-map-pages__table_a3s_kr5_cr}

## Scripting custom map page behavior for
smartphone {#scripting-for-map-pages__section_sx4_jtw_j1b}

If 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.

## Basic map page script {#scripting-for-map-pages__section_q5n_ytw_j1b}

This script displays all active, critical incident locations.

    //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 map page script {#scripting-for-map-pages__section_ldd_v5w_j1b}

This script displays all active, critical incident locations with custom settings for smartphone users.

    //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";
     }
    }

## Advanced map page script {#scripting-for-map-pages__section_blc_bvw_j1b}

This 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.

    //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";
     }
     }
    }

## Map page marker label script {#scripting-for-map-pages__section_nyt_mvw_j1b}

Marker labels allow you to add dynamic text to markers. This example displays the active incident count at each location. Figure 1. Map marker labels

    //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;
     
     }
    }

**Related tasks**   

* [Set up Google Maps API](https://servicenow-prod.fluidtopics.net/GEkTBJ8JDc~d5uG3LTWT~A "You enable the geolocation feature using the appropriate entries from a Google Maps API for Business license, or a Google Maps JavaScript API Key.")
* [Create a map page](https://servicenow-prod.fluidtopics.net/dOZxZW5kcxbzzXlZSh8EVg "Your ServiceNow instance provides several default map pages. You can also create custom map pages with the script examples described in this page.")
* [Create a map page module](https://servicenow-prod.fluidtopics.net/6lu1ef4FI_JvdwIjMaF9pA "You can create a new application module for desktop or smartphone users to display a Google map page.")
* [Create an advanced Map Page](https://servicenow-prod.fluidtopics.net/C98db7RRRSdAX20kX0yd7w "Use advanced configuration to set up Map Pages without scripting.")
* [Set map application scope](https://servicenow-prod.fluidtopics.net/wroMRNbtKfOwOcJ~XycHTA "Enable map application scope to specify which application can modify your Map Page configuration.")
* [Create a smartphone map page module](https://servicenow-prod.fluidtopics.net/8o~Xrk8UYEQYml8BSRKMAA "You can create a custom smartphone module that links directly to a map page.")