title: Styling InfoWindow with Google Maps API
body: <p>I'm currently working with Google Maps, and everything works fine by now. But I want to change the styling of the InfoWindow. I have been researching, but haven't find anything useful yet to help me understand InfoWindow (not even the API Documentation.) </p>
  
  <p><strong>So; how do I change the styling like colors, background, borders and etc. of the InfoWindow box in my map?</strong></p>
  
  <p>Thanks in advance.</p>
  
  <p>Heres my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;title&gt;Google Maps Example&lt;/title&gt;
       &lt;script src='http://code.jquery.com/jquery.min.js' type='text/javascript'&gt;&lt;/script&gt;
       &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;}
        #map_canvas { height: 100% }
        .InfoWindow {
        background: #000;
        }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var infowindow = null;
      $(document).ready(function () { initialize();  });
  
      function initialize() {
  
          var centerMap = new google.maps.LatLng(59.9149, 10.72974);
  
          var myOptions = {
              zoom: 14,
              center: centerMap,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
  
          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          setMarkers(map, sites);
          infowindow = new google.maps.InfoWindow({
                  content: "loading..."
              });
      }
  
  
      var sites = [
      ['Mount Evans', 59.934615,10.743392, 4, '&lt;div class="InfoWindow"&gt;&lt;b&gt;This is Mount Evans.&lt;/b&gt;&lt;/div&gt;'],
      ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
      ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
      ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
      ];
  
      var image = new google.maps.MarkerImage(
        'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png',
        new google.maps.Size(30,37)
      );
  
      function setMarkers(map, markers) {
  
          for (var i = 0; i &lt; markers.length; i++) {
              var sites = markers[i];
              var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
              var marker = new google.maps.Marker({
                  position: siteLatLng,
                  map: map,
                  title: sites[0],
                  zIndex: sites[3],
                  html: sites[4],
                  icon: image
  
              });
  
              var contentString = "Some content";
  
              google.maps.event.addListener(marker, "click", function () {
                  infowindow.setContent(this.html);
                  infowindow.open(map, this);
              });
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Edit: It does not look like it's possible to style InfoWindow (just the input). However, Infobox makes this possible.</strong></p>