Building the Map and List View

The next step in building the mapping application is creating the Visualforce page that displays the map and the corresponding list of accounts. The Visualforce page defines a panel for the Google Maps object, creates a group sub-panel to display the list of accounts, and uses JavaScript to retrieve the account addresses and populate the map with color-coded markers based on the customer's priority. The JavaScript sets up the map object by performing the following logic:

• Get the addresses to map from the {!AddrArStr} string array
• Unpack the address array by keying off the delimiters defined in the controller
• Call doAddLocationToMap for all account addresses and the current user
• Use Account.CustomerPriority__c as the key to determine which marker color to use—green, yellow, or red
• Retrieve the custom image markers stored in the $Resource.markers static resource

It's good practice to place any JavaScript code within a static resource, in case it needs to be referenced in multiple locations. Create a static resource named MobileListView:

The following code defines the landing page of our mapping application:

The markup in our page uses the <apex:composition> component to reference a template. The template leverages the iUI framework, which lets us apply iPhone-like styling to our page. The iUI framework is included from the $Resource.IUI static resource. By defining a template, we can easily apply the same styling to all of the Visualforce pages we create for the iPhone platform.

The following markup defines the iuivf page used as the template:

Note the following about the template:

• The markup overrides the #home style from the iUI library. This ensures that our application will render in Salesforce Classic Mobile without any noticeable gap at the top of the page.
• The markup avoids the use of the class="Toolbar" element. The embedded browser in Salesforce Classic Mobile has a navigation toolbar at the top of the page, so a second toolbar would likely confuse users. If you want to use the button styles provided in the iUI framework, don't use the Toolbar class to render the buttons.