0

I am using Here map for my website and i need height of the Map more than width. In order to do so, when I give height more than width, Map left white space at the top.

enter image description here

.MapNode.before768{position:absolute;height:auto;display:inline-block;vertical-align:top;}

Then this is the class where I initialize map.

.MapNode .movable_map{height:1150px;}

My Js

function loadHeremap(element){
   //api key registration
   var pixelRatio = window.devicePixelRatio || 1;
    var defaultLayers = platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    });
    var map = new H.Map(document.getElementById(element),
      defaultLayers.normal.map,{
      center: {lat: city_latitude, lng: city_longitude},
      zoom: 7,
      pixelRatio: pixelRatio
    });
}

Lot of other things are happening inside the function but I think this is the key element for my issue.

Rahul Gupta
  • 972
  • 11
  • 29
  • Well, I solved the issue. Actually map was resizing horizontally because i was plotting lot of location marker over there. thanks everyone. – Rahul Gupta Jul 03 '20 at 07:28

1 Answers1

0

Instead of setting the height manually via CSS, You can pass the height parameter as key h in query string of request URL:

 https://image.maps.ls.hereapi.com/mia/1.6/mapview
 ?apiKey={YOUR_API_KEY}
 &h=300
 &w=420

Here is the playground link to try and test different height and width

Map Image with Height and Width

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • well.. I am not using url to initialize map. However, in my code where you can see zoom value, I added width and height but it didn't work. – Rahul Gupta May 27 '20 at 08:08