title: How to position Google Maps Infowindow box near the top and style as error
body: <p>I have developed this <a href="http://plnkr.co/edit/Bcj08pSu0o6RAB7IaYwE?p=preview" rel="nofollow noreferrer">plunker sample</a>:</p>
  
  <p>Click on "View Canada Map with Message" to see the infowindow.</p>
  
  <p>I want the infowindow to be positioned near the top of the map boundary or in the middle of the upper part. Also, I want to style the infowindow to appear as error message with error indicator icon.</p>
  
  <p>See sample code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Simple Map&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        /* 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;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body &gt;
      &lt;input type="button" value="Init Map" onclick="initMap()"&gt;
      &lt;input type="button" value="View Canada Map with Message" onclick="viewCanadaWithMessage()"&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        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('&lt;strong&gt;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 &lt;span style="color:red"&gt;error message&lt;/span&gt; with error indicator icon.&lt;/strong&gt;');
                  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');
          })
        }
      };
  
      &lt;/script&gt;
      &lt;script language="JavaScript" &gt;
      &lt;!--
      document.writeln("&lt;script async defer src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAh7w3_pTxbOFG3tT2P8ZDTwxDnp5A2GNw&amp;callback=doLoad\"&gt;&lt;/script&gt;");
      //--&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How to calculate the position (lat, lng) which will be close to the upper side, and how I can style the infowindow to look like an error message?</p>