I am using this library: / to create a Map for my website. I am attempting to set the width and height of the map to 100% through the style attribute to make the map display at full-screen size.

When I specify the following:

<div id="map1" style="width: 100%; height: 100%"></div>

The map displays as follows:

The width attribute appears to work correctly, however the height attribute does not. When I resize the window, the width scales correctly, whereas the height appears to scale up constantly regardless of whether I scale the image up or down.

How can I make the map appear with a specified scale using a percentage?

I am using this library: http://jvectormap./ to create a Map for my website. I am attempting to set the width and height of the map to 100% through the style attribute to make the map display at full-screen size.

When I specify the following:

<div id="map1" style="width: 100%; height: 100%"></div>

The map displays as follows:

The width attribute appears to work correctly, however the height attribute does not. When I resize the window, the width scales correctly, whereas the height appears to scale up constantly regardless of whether I scale the image up or down.

How can I make the map appear with a specified scale using a percentage?

• javascript
• css
• jvectormap

Share Improve this question Follow asked Dec 6, 2014 at 2:49 user3011902user3011902

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this in your CSS:

head {
    height:100%;
}
#map1 {
    position:absolute;
    height:100%;
}

Setting the height of the head element to 100% sets the definition for what the map height will be.

You can also try using vh instead of %

<div id="map1" style="width: 100%; height: 100vh"></div>

In order to jVectorMap to take full height and width, then add outer div container to the map. Also set width and height Outer container.

<div class="map-container">
     <div id="world-map" class="jvmap-smart"></div>
</div>

Next add css styles.

.map-container{
    height: 300px;
}

.jvmap-smart{
    width: 100%; 
    height: 100%;  
}
@media only screen and (min-width: 576px) {
    .map-container{
        height: 350px;
    }
}
@media only screen and (min-width: 768px) {
    .map-container{
        height: 400px;
    }
}
@media only screen and (min-width: 992px) {
    .map-container{
        height: 500px;
    }
}
@media only screen and (min-width: 1200px) {
    .map-container{
        height: 600px;
    }
}

To know more about jVectorMap refer this link https://smarttutorials/how-to-create-make-responsive-world-map-jvectormap-using-jquery/

If you simply want the map to be shown correctly at any size on initial load, you can use :

<div id="map1" style="width: 100%; height: 400px;"></div>