title: How can I make the borders of my map thicker Google Geomap?
body: <p>I'm using a dhtml map that I'm <a href="http://www.koolbusiness.com/_/index_india.html" rel="nofollow noreferrer">deploying to google appengine</a>. Now I'd like to make the borders darker and thicker. How can it be done? I have this map deployed</p>
  
  <p><img src="https://i.stack.imgur.com/iutjL.png" alt="enter image description here"></p>
  
  <p>And my mockup looks like the following</p>
  
  <p><img src="https://i.stack.imgur.com/bo4pt.png" alt="enter image description here"> Can we try and make my map look more like the mockup? The code I have so far is this.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;style xmlns="http://www.w3.org/2000/svg"&gt;
          path { fill: #ffc801; }
          :hover { fill: #fcafff; }
        &lt;/style&gt;
  
      &lt;script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;google.load('visualization', '1', {'packages': ['geochart']});
  
        google.setOnLoadCallback(drawVisualization);
  
          function drawVisualization() {var data = new google.visualization.DataTable();
  
         data.addColumn('string', 'Country');
         data.addColumn('number', 'Value'); 
         data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
  
         var options = {
         backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
         colorAxis:  {minValue: 0, maxValue: 0,  colors: []},
         legend: 'none',    
         backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },   
         datalessRegionColor: '#ffc801',
         displayMode: 'regions', 
         enableRegionInteractivity: 'true', 
         resolution: 'provinces',
         sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
         region:'IN',
         keepAspectRatio: true,
         width:600,
         height:400,
         tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}   
         };
          var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
          google.visualization.events.addListener(chart, 'select', function() {
          var selection = chart.getSelection();
          if (selection.length == 1) {
          var selectedRow = selection[0].row;
          var selectedRegion = data.getValue(selectedRow, 0);
          if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion];  }
          }
          });
         chart.draw(data, options);
       }
       &lt;/script&gt;
  
       &lt;div id='visualization'&gt;&lt;/div&gt;&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>I changed to code according to the answer. Now I don't get the result I expected. Here is the now code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;style xmlns="http://www.w3.org/2000/svg"&gt;
          path { fill: #ffc801; }
          :hover { fill: #fcafff; }
        &lt;/style&gt;
  
      &lt;script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;google.load('visualization', '1', {'packages': ['geochart']});
  
        google.setOnLoadCallback(drawVisualization);
  
          function drawVisualization() {var data = new google.visualization.DataTable();
  
         data.addColumn('string', 'Country');
         data.addColumn('number', 'Value'); 
         data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();
  
         var options = {
         backgroundColor: { fill: '#FFF', stroke: '#000', strokeWidth: 75 },
         colorAxis:  {minValue: 0, maxValue: 0,  colors: []},
         legend: 'none',
         datalessRegionColor: '#ffc801',
         displayMode: 'regions', 
         enableRegionInteractivity: 'true', 
         resolution: 'provinces',
         sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
         region:'IN',
         keepAspectRatio: true,
         width:600,
         height:400,
         tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}   
         };
          var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
          google.visualization.events.addListener(chart, 'select', function() {
          var selection = chart.getSelection();
          if (selection.length == 1) {
          var selectedRow = selection[0].row;
          var selectedRegion = data.getValue(selectedRow, 0);
          if(ivalue[selectedRegion] != '') { document.location = ivalue[selectedRegion];  }
          }
          });
         chart.draw(data, options);
       }
       &lt;/script&gt;
  
       &lt;div id='visualization'&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the above code then I get a dark area around the map instead of thicker borders. What can be done?</p>
  
  <h2>Update</h2>
  
  <p>If I use an <code>iframe</code> then the zoom does not crop the map area and the hovering is not working as expected. </p>
  
  <pre><code>path {
    stroke: #555;
  }
  #wrapper2 { width: 450px; height: 450px; padding: 0; overflow: hidden; }
  
  #scaled-frame { width: 400px; height: 400px; border: 0px; }
  
  #scaled-frame {
  
  zoom: 0.61;
  overflow: hidden;
  -moz-transform: scale(0.61);
  
  -moz-transform-origin: 0 0;
  
  -o-transform: scale(0.61);
  
  -o-transform-origin: 0 0;
  
  -webkit-transform: scale(0.61);
  
  -webkit-transform-origin: 0 0;
  
  }
  
  
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
  
  #scaled-frame  { zoom: 1;  }
  
  }
  
  
  
  &lt;div id="wrapper2"&gt;
      &lt;iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/K6WzT.png" alt="enter image description here"></p>