[SOLVED] Google maps and HTML

Google maps and HTML

I have a google map this is my current code

 <div class="cont" id="cont">
 <p><script type="text/javascript" src="http://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.load('visualization', '1', {packages: ['geochart']});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Province', 'G-Form Outlets'],
    ['ZA-GT', 'Gauteng', 10],
    ['ZA-WC', 'Western Cape', 5],
    ['ZA-EC', 'Eastern Cape', 2],
    ['ZA-NL', 'KwaZulu-Natal', 1],
    ['ZA-FS', 'Free State', 1],
    ['ZA-LP', 'Limpopo', 0],
    ['ZA-NW', 'North-West', 0],
    ['ZA-MP', 'Mpumalanga', 0],
    ['ZA-NC', 'Northern Cape', 0],  

  ]);

  var view = new google.visualization.DataView(data);
view.setColumns([1, 2]);

  var geochart = new google.visualization.GeoChart(
          document.getElementById('visualization'));
      var options = {};
      options['region'] = 'ZA';
      options['resolution'] = 'provinces';
      options['width'] = 500;
  options['height'] = 500;
  options['colors'] = ['#cccccc', '#C01E24'];
      options['legend'] = 'none';

    google.visualization.events.addListener(geochart, 'select', function() {
        var selectionIdx = geochart.getSelection()[0].row;
        var stateName = data.getValue(selectionIdx, 0);
        var value = data.getValue(selectionIdx, 2); 

      if (value >= '1') {
      window.open('http://e-track.co.za');}
          });

      geochart.draw(data, options);
    }

   google.setOnLoadCallback(drawVisualization);
   </script>
   <div id="visualization"></div>
   </p>
   </div>

It is working great the problem is I am trying to place it in a DIV Tag but it keeps throwing it over to the left of the page where i want to place it in the middle of the box basically

Solution

<head>
    <style type="text/css">
        div
        {
            margin: 0 auto;
        }
    </style>
</head>

Add <Head> part in your code... Thatsall