Jvectormap very small on div change

jquery html jvectormap world-map
Dan James Palmer picture Dan James Palmer · Feb 19, 2013 · Viewed 7.4k times · Source

I have two divs, one with the world map and one with the US map. When the USA is clicked on the world map I want to hide that div and bring the US map into view.

This works but the map is tiny, even though the position of the zoom buttons indicates the size of the div is how it should be.

enter image description here

Any ideas?

If I have both divs set to "block" from the start they are both the correct size, it's only when invoking code to switch the div that it fails.

onRegionClick: function(event, code){
                        if (code == "US") { openUS('us-map') }
            },

  function openUS(a) {

    document.getElementById("world-map").style.display = 'none';
    document.getElementById(a).style.display = 'block';
  }

Answer

bjornd picture bjornd · Feb 20, 2013

This issue is caused by the fact that you initialize map on the hidden element, whose size can't be calculated properly at that time. Try to change your logic so that jVectorMap would be initialized after the element becomes visible.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
Get the value in an input text box

What are the ways to get and render an input value using jQuery? Here is one:

Read More
How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is …

Read More