Back

How to create a map


Hello and welcome to your new GoodBarber tutorial! 

Today we will learn how to create a Map in your app.
You will be able to add as many points as you want to present places to your users.

Let's add our section in the menu My app > Content > Sections.

click on Add a section. 
Select Map.

name the section and add it.

Now let's edit the content.

I click on Create a point to add my first point.

name the point;

I enter the address and the geographic coordinates.

I can add content to describe my point.

Text, photo, video, quote and embed code. 

On the right side, I can select the section to which my point belongs if I have several maps in my app.

I can add action buttons and a website.

Let’s select the style of my icon.
Its color.

I can also add a custom icon here.

And finally enable or not the comments.

Finally, in the SEO tab, I enter the metadata of my point.

And publish my point.

Let's move on to section design.
The Map section offers several views:
- A Map view
- A point list view
- and finally a detailed view of the points;

I'm editing my points list.

I can choose to hide this view and offer only the Map view.

And also the order in which my views appear.

Here I’ll display my list first.

Then I select the color of the background and the borders.

The thumbnail and info display.

The colors and fonts of the texts/

The color of the four-way controller.

And finally the thumbnail.

I do the same for the detail view of the points.

Here, my design is finished :)


Last thing, the parameters of the section.

In my section list I click on Settings.
Here I can add categories, change the sorting order of my points, manage comments.

Finally the SEO metadata.


Now you know how to add one or more maps in your app! 

See you soon for another tutorial ! 

Related videos