How can I make the borders of my map thicker Google Geomap?

I'm using a dhtml map that I'm deploying to google appengine. Now I'd like to make the borders darker and thicker. How can it be done? I have this map deployed

enter image description here

And my mockup looks like the following

enter image description here Can we try and make my map look more like the mockup? The code I have so far is this.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <style xmlns="http://www.w3.org/2000/svg">
        path { fill: #ffc801; }
        :hover { fill: #fcafff; }
      </style>

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>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);
     }
     </script>

     <div id='visualization'></div>>
  </body>

</html>

Update

I changed to code according to the answer. Now I don't get the result I expected. Here is the now code.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <style xmlns="http://www.w3.org/2000/svg">
        path { fill: #ffc801; }
        :hover { fill: #fcafff; }
      </style>

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>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);
     }
     </script>

     <div id='visualization'></div>
  </body>

</html>

When I run the above code then I get a dark area around the map instead of thicker borders. What can be done?

Update

If I use an iframe then the zoom does not crop the map area and the hovering is not working as expected.

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;  }

}



<div id="wrapper2">
    <iframe id="scaled-frame" src="/_/mapframe.html" height="300" width="500" ></iframe>
</div>

enter image description here

Solution

Use stroke CSS property on element <path> to get a thicker border, this is a SVG HTML5 feature.

In your .css file add this:

path {
  stroke: #555;
}

To display india only, you need to set the scale property to what best fit your HTML5 canavas. Checkout the framework API you use and figure out how to manage scale.