1

I am learning bootstrap and I tried to use the HERE maps based on this example from HERE

I realized, that to be able to use relative height (e.g. height: 50%) I have to make the css styles like that:

html, body {
  height: 100%;
  width: 100%;
}

#map {
  width:100%;
  height: 100%;
  margin:0 auto;
}

Now I would like to create two columns with bootstrap, left for itinerary and right for the map view.

<div class="container">
<div class="row">
  <div class="col-sm-4">
    Here comes the itinerary
  </div>
  <div class="col-sm-8" id="map">
  </div>
</div>

I quickly realized, that I have to use absolut size for the map element (e.g. width: 400px), otherwise the map is not displayed at all (when using height: 100%;) or the columns are stack from the beginning (using width: 100%;)

I suspect, that the reason for this lies in the width/height styling of the parent elements (row, container), but I do not know the right solution.

I also know, that after getting the styling right I need to take care about the automatic adapting of the maps size on window resize, but I would like go get the right styling first.

karlitos
  • 1,604
  • 3
  • 27
  • 59
  • Just create a `div` with `id` of `map` inside `col-sm-8` and in CSS give it a height (for example: `#map { height: 400px; }`). It should work and should be responsive. – max May 30 '16 at 00:34
  • Putting the map div inside a col-sm-8 resolved the issue with width. I still would like to use relative height (fill-up the vertical space) of the map element. – karlitos May 30 '16 at 06:59
  • Hmm, relative height to what? Browser height or something else? – max May 30 '16 at 07:01
  • I want add fixed-height header and footer and have two columns in between taking the rest of the vertical space, the left one filled with the map. – karlitos May 30 '16 at 07:06
  • You can use the code provided in this example. http://jsfiddle.net/5V288/1025/ – max May 30 '16 at 07:09
  • This solution worked for me: https://stackoverflow.com/a/26295344/1173800 – jhilden Aug 23 '17 at 16:14

1 Answers1

0

From earlier reply from HERE support "try this after the map object initialization:

window.addEventListener('resize', function () { map.getViewPort().resize(); }); That should solve the problem. How to redraw Here Map when container resizes?"