I am currently working on a Website project and I am interested in incorporating an interactive map from HERE Maps that spans the entire screen under my navigation bar. How can I achieve this?
After initially using Google Maps, I switched to HERE Maps due to pricing and feature differences. However, I am facing challenges in getting the interactive map to display correctly on my site. Despite watching tutorials and attempting different codes, the map always appears static. Additionally, I am struggling to make the map fit the entire screen below the navbar using relative sizing.
<!-- HERE Maps performance optimization for mobile-->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<!-- HERE Maps API Code Libraries-->
<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 current issue with the map is that it appears static instead of interactive, and also doesn't fill up the complete screen. Any assistance or guidance on resolving these issues would be highly appreciated. Thank you!