Я настраиваю Веб-сайт как небольшой проект, и я хотел бы добавить интерактивную карту от HERE Maps, занимая все доступное пространство экрана, под моей панелью навигации.Как добавить интерактивную карту из карт ЗДЕСЬ?
Я уже пробовал Карты Google, все работало нормально, но пришлось переключиться из-за цены и возможностей.Теперь, после перехода на HERE Maps, я не могу найти способ добавить интерактивную карту на свой сайт, я всегда получаю статическую карту.Посмотрел несколько уроков, которые бы решили мою проблему, но их код не работает для меня.Кроме того, я хотел, чтобы карта умещалась на весь экран под навигационной панелью, я использовал тот же код, который использовал для карт, чтобы уместить его на экране, но он также не работает.
<!-- 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>
Карта должна быть интерактивной, но статичной.Кроме того, он не подходит для остальной части экрана, поэтому мне пришлось использовать px для высоты.
Каждая помощь приветствуется.Спасибо!