How to implement interactive Map with HERE Maps API and resize it?

I'm setting up a Website as a small project and I'd like to add an interactive map by HERE Maps, taking up all available screen space, under my navbar. How do I include an interactive map from HERE maps?

I've already tried Google Maps it worked fine but had to switch due to pricing and features. Now after switching to HERE Maps, I can't seem to find a way to include an interactive map on my site, I always get a static one. Watched some tutorials which would have solved my issue but their code ain't working for me. Also, I've been wanting to let the map fit my whole screen beneath the navbar, I used the same code I used for maps to fit the screen but it also doesn't work.

<!-- HERE Maps performance optimiiization for mobile-->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<!-- HERE Maps API Code Libaries-->
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Roboto|Source+Sans+Pro" rel="stylesheet">

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Site info-->
<title>opX</title>

<!-- CSS -->
<link rel="stylesheet" href="stylesheet.css" type="text/css">

<div class="navbar-fixed navbfx">
    <nav class="navbfx">
        <navOne>
            <div class="nav-wrapper" style="background-color: #313131;">

                <ul class="left hide-on-med-and-down" id="topNav">
                    <li class="waves-effect waves-light"><a href="index.html" style="color: #c1cbc1">Search</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Chat</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">YouTube</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Mail</a></li>
                    <li class="active waves-effect waves-light"><a href="here_maps.html"><b>Maps</b></a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Cloud</a></li>
                </ul>

                <ul class="right hide-on-med-and-down" id="topNav">
                    <li class="waves-effect waves light"><a href="" style="color: #c1cbc1">Sign in</a></li>
                    <li><i class="material-icons">settings</i></li>
                </ul>

            </div>
        </navOne>
    </nav>
</div>

<main>
    <!-- had to specify the size in pixel cause I coudlnt find a way to do relative -->
    <div style="width: 100%; height: 939px" id="mapContainer"></div>
    <script>
        // Initialize the platform object - app_ID and app_Code are included - I just removed for this post
        var platform = new H.service.Platform({
            'app_id': '{removed}',          /* API INFO HERE*/
            'app_code': '{removed}'
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object
        var map = new H.Map(
            document.getElementById('mapContainer'),
            maptypes.normal.map, {
                zoom: 10,
                center: {
                    lat: 52.5,
                    lng: 13.4
                }
            });

        var mapEvents = new H.mapevents.MapEvents(mapContainer);

        var behavior = new H.mapevents.Behavior(mapEvents);

    </script>

</main>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

The map should be interactive but its static. Also, it doesn't fit the rest of the screen so I had to use px for the height.

Every help is appreciated. Thanks!

from How to implement interactive Map with HERE Maps API and resize it?