Adapt this jQuery map to the screen resolution

Question

I'm trying to adapt a jQuery map to the screen resolution. This is my project link: http://comercialposadas.com/goodbarber/

And I use this code in the mapplic.js to resize the map:

$(window).resize(function() {
    self.el.height($(window).height());
}).resize();

But the map doesn't show it.

Answer 1

If you add height:100%; either to the style of both the html and body elements, or to a CSS file that addresses them and change:

<div id="mapplic" class="mapplic-element" style="height: 420px;">

to

<div id="mapplic" class="mapplic-element" style="height: 100%;">

it will cause the map to be displayed at full height.

The reason for changing html and body as well as the #mapplic div is that height needs to be inherited from the root of the document in order to use 100% .