Displaying a map of a location
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.
- Create a new blank UX Component.
- Add a Map control with Name TheMap and Label Here’s the map:
- Save the Component with the file name DemoMapControl.
- Display the Component in Working Preview.
- Add a Textbox control with the Name AddrForMap, and no Label.
- Move AddrForMap above TheMap.
- 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.
- For the Map_It control, add a click Event with the Action highlighted as shown here:
- The Map Actions window appears. Make the settings as shown here. As you do, the instructor will review each of the settings’ options.
- Add the comment Display map using address as entered.
- 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:
- Save the Event and its Actions.
- Save the Component.
- 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.
- Create a new Component, of type Google Map.
- Save the Component with the file name DemoMapComp.
- Display the Component in Working Preview. (If you get an error referencing “onInitialRender”, just keep toggling between Design and Working Preview).
- Zoom in on the map. You are seeing the location of Alpha Software Corporation.
- Note the other map controls that are available by default.
- Click the Design tab.
- 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.