Map Marker Module

Map Marker Module (04:44)

Visualize address and location data for your records on an embedded Google Maps.

Video Transcript

With the modules available and those that are upcoming in Composer, there’s a great variety in the way you can display and manipulate data that’s stored in your records. From differing list types to plotting numbers on a graph, or showing a switchboard of the operational status of fleet of internet connected devices.

In this episode, I’m going to show you some of the very basics of how data from your records can be consumed by a module and displayed a more useful way. In this introductory case, we’ll use address information from our data records to display a location on a map. Although we’ll keep our example simple by way of keeping these locations static, they don’t have to be. The Map Marker module that we use could, for example, display something like shipments that are on the move or even the secret locations of my network of spies.

The app example I’ll be using today is a real-estate listings app I’ve put together to, amongst other things, help agents quickly find new listings when they’re with potential clients. Let’s dive in to see what the app looks like.

In our app, I’ve got our listings list page open. I’ll tap one listing to view the listing detail and I can see that I’ve got a few fields here including an address field. However, the first thing I’d like to see when I’m showing my client a listing is a map that shows the exact location of the property for sale.

So, let’s head back over to Composer and take a look at how we can do this. Here I am in the Interface Builder. So I’ll open up my Listings page group, and open up the details view. This is the page, where, in my end app I’ll see each individual listing like I can see in my mobile app to the right.

To add the map marker module to my application, I’ll open up the module browser, and head to the Data Access tab. Here, I’ll only see the modules that can be used on this page. I’ll click to install the module and now it’s available to be used anywhere in my app in a data resource that has address or location information. I’m going to drag the module above the record details, because it’s the first thing I want to see when I open the listing.

Now I’m presented with a number of settings. I’m going to choose the address field from the dropdown. We’ll take a look at some of the others settings in a moment because the rest of the settings are optional, first, let’s get it working. So, I’ll hit save.

Next, I’m going to switch over to the browser side layout to adjust the position of the map so that it appears on the bottom left of the record’s details. Now, I’ll hit save, and let’s publish the app to see how it looks. Here, you can see that I’ve got my map as the first thing visible on my mobile, and the separate layout for the browser.

Let’s head back to Composer. It doesn’t make sense to go through all of these settings since some are self explanatory, but let’s take a look just at a couple. As you may know already, the Chrome Title which is a common setting to all modules, is the title in the border above the box that contains the module.

The Info window, as you can see, is a small box that appears above thelocation marker. In it, you can give it a label as well as content. For us, it makes sense that we’d label it, ‘listing address’ and use the address for the text. I’ll also choose to show it by default. I can also choose the level of zoom between 1 and 20 where 20 would be the closest. Also here I can change the map between the satellite, regular and hybrid options.

And that’s it for the Map Marker module. We do have more map modules available and if you’re interested in plotting several points on a map using many locations, make sure to check out the video on the “Map Marker List” module. There, I’ll continue with the same example and we’ll take a look at some pretty useful techniques.

Thanks for watching. If you’re looking for more resources on modules or features, be sure to check out the academy at academy.appgyver.com.