title: Switch maps in Jvectormap?
body: <p>I'm trying to switch between maps using Jvectormap. </p>
  
  <p>Currently I have two divs, one "world-map" and one "us-map". The US Map is hidden. When someone clicks on the USA on the world map the world map div closes and the US map opens, works nicely.</p>
  
  <p>On showing the US map I also reveal a button that is designed to take the user back to the world map. However, when this is clicked it shows TWO world maps. I'm sure I'm doing something fundamentally wrong but can' find any documentation on this. I would have thought this was a common thing to want to do.</p>
  
  <p>Any pointers would be great.</p>
  
  <p><strong>DIVS and Back button image:</strong></p>
  
  <pre><code>&lt;table width="900" cellpadding="0" cellspacing="0" align="center"&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;&lt;img src="images/titletext.png"&gt;&lt;/td&gt;
  &lt;td align="right"&gt;&lt;img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;Tr&gt;
  &lt;Td align="center"&gt;
  
  &lt;div id="world-map" style="display:block;"&gt;&lt;/div&gt;
  &lt;div id="us-map" style="display:none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery/JavaScript:</strong></p>
  
  <pre><code> function showusmap() {
        document.getElementById("world-map").style.display = 'none';
        document.getElementById("us-map").style.display = 'block';
        document.getElementById("backtoworld").style.display = 'block';
  
        openusmap()
   }
  
       function openusmap() {
  
        $('#us-map').vectorMap({
      map: "us_aea_en",
      normalizeFunction: 'polynomial',
      backgroundColor: 'transparent',
      regionStyle: {
      initial: {
      fill: '#128da7',
      }},
      onRegionClick: function(event, code){
              //  if (code == "US") { showmap('us_aea_en') }
      },
  
      series: {
  
          regions: [{
              values: {
                  "US-CA":'#006633',
                  "US-IL":'#006633',
                  "US-IN":'#006633',
                  "US-DC":'#006633',
                  "US-WA":'#006633',
                  "US-FL":'#006633',
                  "US-TX":'#006633',
                  "US-OR":'#006633',
                  "US-OH":'#006633',
                  "US-MS":'#006633',
                  "US-OK":'#006633',
                  "US-MI":'#006633',
                  "US-PA":'#006633',
                  "US-NY":'#006633',
                  "US-MN":'#006633',
                  "US-NC":'#006633',
                  "US-GA":'#006633',
                  "US-AL":'#006633',
                  "US-VA":'#006633',
                  "US-VT":'#006633',
                  "US-CT":'#006633',
                  "US-MO":'#006633',
                  "US-AZ":'#006633',
                  "US-NJ":'#006633',
  
                  }
          }]
      }
  })
  
    }
  
  
  function showworldmap() {
  
       document.getElementById("us-map").style.display = 'none';
        document.getElementById("world-map").style.display = 'block';
        document.getElementById("backtoworld").style.display = 'none';
  
        openworldmap()
  }
  
  function openworldmap() {
  
          $('#world-map').vectorMap({
              map: "world_mill_en",
              normalizeFunction: 'polynomial',
              backgroundColor: 'transparent',
              regionStyle: {
              initial: {
              fill: '#128da7'
  
              }},
              onRegionClick: function(event, code){
                          if (code == "US") { showusmap()  }
              },
  
              series: {
                  regions: [{
                      values: {
                          CZ:'#006633',
                          FR:'#006633',
                          IT:'#006633',
                          NL:'#006633',
                          US:'#006633',
                          CH:'#006633',
                          NO:'#006633',
                          SE:'#006633',
                          FI:'#006633',
                          AT:'#006633',
                          GR:'#006633',
                          CY:'#006633',
                          AU:'#006633',
                          BE:'#006633',
                          HU:'#006633',
                          GB:'#006633',
                          ZA:'#006633',
                          BR:'#006633',
                          CA:'#006633',
                          MX:'#006633',
                          PR:'#006633',
                          IL:'#006633',
                          PK:'#006633',
                          MY:'#006633',
                          JP:'#006633',
                      }
                  }]
              }
          });
  }
  </code></pre>