Using a Map control

Along with the instructor, create a Component with a Map control and a way for a user to request a map of a location.


  1. Create a new blank UX Component.
  2. Add a Map control with Name TheMap and Label Here’s the map:
  3. Save the Component with the file name DemoMapControl.
  4. Display the Component in Working Preview.
  5. Add a Textbox control with the Name AddrForMap, and no Label.
  6. Move AddrForMap above TheMap.
  7. Below AddrForMap, add a Button with Button text Map this location and Id Map_It.

Make sure there will be no break between the controls on the screen.

  1. For the Map_It control, add a click Event with the Action highlighted as shown here:


  1. The Map Actions window appears. Make the settings as shown here. As you do, the instructor will review each of the settings’ options.

Click OK.

  1. Add the comment Display map using address as entered.
  2. Add another Google Map Method Action to Refresh map.

Add a comment Refresh the map before displaying a new location.

Move this Action before the first one you created. The window should look like this:




  1. Save the Event and its Actions.
  2. Save the Component.
  3. Display the Component in Working Preview, and try displaying maps for two different locations.

Using a Google Map Component

A Google Map Component presents the user with a Google Maps-style map.


A Google Map Component is a type of Component; it is not a control. You would access it programmatically using the Action highlighted here:

You can pass values to the Component’s Events via arguments, but most experienced developers find the Map control much easier to work with.


Along with the instructor, create a Google Map Component and explore its Properties.

  1. Create a new Component, of type Google Map.
  2. Save the Component with the file name DemoMapComp.
  3. Display the Component in Working Preview. (If you get an error referencing “onInitialRender”, just keep toggling between Design and Working Preview).
  4. Zoom in on the map. You are seeing the location of Alpha Software Corporation.
  5. Note the other map controls that are available by default.
  6. Click the Design tab.
  7. In the left-hand pane, click Properties. Examine the Properties, including these:
  • Use Sensor – useful for mobile business applications. The application can access the mobile device’s GPS. When you mark this Property, you can also choose the next two properties.
  • Set Initial Position from Sensor – mark this when you release the application. It will do as its name suggests when the user opens the map.
  • Reinitialize on Geocode – if the map receives a new Geocode value, refresh the map. Otherwise, the Component will add the new point to the map.