I'm using a dhtml map that I'm [deploying to google appengine](http://www.koolbusiness.com/_/index_india.html). 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](https://i.stack.imgur.com/iutjL.png)

And my mockup looks like the following

![enter image description here](https://i.stack.imgur.com/bo4pt.png) 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](https://i.stack.imgur.com/K6WzT.png)