Map UI component is not displayed in Cuba Platform

I use CUBA Platform version 6.0.8 and trying to add map viewer component to the screen, but it's not shown. Screen descriptor is listed below:

<window xmlns="http://schemas.haulmont.com/cuba/window.xsd";
        caption="msg://browseCaption"
        class="com.mycompany.gui.mapsample.MapScreen"
        focusComponent="mapBox"            
        xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
    <layout margin="true" spacing="true">
        <vbox id="mapBox">
            <chart:mapViewer id="map" height="100%" width="100%"
                             mapType="satellite"/>
        </vbox>
    </layout>
</window>

I followed this step. These are map properties:

cuba.charts.map.freeApiKey = ********************************
cuba.charts.map.clientId =  ********************************   
cuba.charts.map.defaultZoom = 13.0
cuba.charts.map.defaultLatitude = 51.5001
cuba.charts.map.defaultLongitude = -0.1262

and here's the controller:

public class MapScreen extends AbstractLookup {

    @Inject
    private MapViewer map;

    @Override
    public void init(Map<String, Object> params) {
        GeoPoint center = map.createGeoPoint(53.490905, -2.249558);
        map.setCenter(center);

What can be the problem or at least where should I start debug it?

Solution

First, the given link points to the 5.6 version of the manuals, if you work with version 6, please use proper documentation you can find here

Regarding the problem you are facing: it's not an issue of the Map componet, but layout issue. Vbox height is not specified, so adding height="100%" to the vbox should solve the problem:

<vbox id="mapBox"  height="100%">
    <chart:mapViewer id="map"
                     height="100%"
                     mapType="satellite"
                     width="100%"></chart:mapViewer>
</vbox>

Also, as a useful tip, you can always Analyze Layout while run time and find out what the problem is. To perform this check right click on a tab and press Analyze Layout (see the picture below).

Analyze Layout in runtime

So, if you analyze layout in your tab you will get the following message:

[ERROR] Container 'mapBox', nested component 'map'
Nested component has relative height 100.0% inside container with undefined height

which clearly explains where the problem is.