How to open Google Map infowindow in the center near the top of the map

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body >
    <input type="button" value="Init Map" onclick="initMap()">
	<input type="button" value="View Canada Map with Message" onclick="viewCanadaWithMessage()">
	
    <div id="map"></div>
    <script>
	  var mapDiv = document.getElementById('map');
      var map;
	  var infoWindow;
	var geocoder ;  
	var map;
	var palce;
	function initMap() {
	  map = new google.maps.Map(mapDiv, {
		center: {lat: -34.397, lng: 150.644},
		zoom: 8
	  });
	  infoWindow = new google.maps.InfoWindow;
	  infoWindow.setPosition(map.getCenter());
	  infoWindow.setContent('This is the center of the map');
	  infoWindow.open(map);
	  geocoder = new google.maps.Geocoder();
	}
	 //setTimeout(function(){initMap()}, 100);
	function doLoad() {

	}
	function viewCanadaWithMessage() {
		//geocoder.geocode({address:'Canberra, Australia'}, function(result, status){
		geocoder.geocode({address:'Canada'}, function(result, status){
			if (status == "OK") {
				map.setCenter(result[0].geometry.location);
				map.setZoom(3);
				var infoWindow = new google.maps.InfoWindow;
				infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>');
				infoWindow.setPosition(map.getCenter());
				infoWindow.open(map);
			}
		});
	}
	//google.maps.event.addDomListener(window, 'load', initMap);
	document.onreadystatechange = function() {
	  if (document.readyState === 'complete') {
		initMap();
		google.maps.event.addDomListener(mapDiv, 'click', function() {
			alert('clicked');
		})
	  }
	};

    </script>
    <script language="JavaScript" >
    <!--
    document.writeln("<script async defer src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAh7w3_pTxbOFG3tT2P8ZDTwxDnp5A2GNw&callback=doLoad\"></script>");
    //-->
    </script>
  </body>
</html>

// Code goes here

/* Styles go here */