Transcript

In this Quick Tip, we're going to learn about the Map element. The Map element enables you to add a map to your app and display points within the map itself.

We use the Map element for apps like delivery services, or photo sharing, or apartment hunting -- anything that needs a location to be pinpointed and displayed on a map, you do that with this element.

For the Map element to work, you'll need to add the Google API Keys in your app's Settings tab. If you don't know how to set that up, please check out our Google API Keys tutorial here!

Depending on your app, you can utilize the Map element to display a Single marker, a List of markers, or None. If you want to display a Single marker, you must specify an address in the "Marker address" field. To do this, you can statically type an address, link this to an input, or an entry in the database.

If you want to display a List, you'll have to specify the list you want to use as you would do with a Repeating Group.

You can also change the visual aspect of your map by changing the "Map type" property to be more realistic, as well as changing the "Map style" property to one of the many available options.

Finally, you can control more map-specific settings or upload your own custom icon for the marker. You can even trigger a workflow using "A map's marker is clicked".

Experiment more with the Map element in your app!

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.