title: how to style Google map info window using css or javascript
body: <p>I am using Google's mysql/ajax/php map search example. I am tying to style the info window with css, but it's not working. Here is the example code</p>
  
  <pre><code>&lt;!DOCTYPE html &gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
      &lt;title&gt;PHP/MySQL &amp; Google Maps Example&lt;/title&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"
              type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      //&lt;![CDATA[
  
      var customIcons = {
        Event_Organisers: {
          icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
        } 
      };
  
      var map = null, marker = null;
  
      function load() {
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(17.4121,78.1278),
          zoom: 13,
          mapTypeId: 'roadmap'
  
        });
        var infoWindow = new google.maps.InfoWindow;
        // Change this depending on the name of your PHP file
        downloadUrl("xmloutput.php", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon
            });
            bindInfoWindow(marker, map, infoWindow, html);
          }
        });
      }
  
      function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
  
  
        });
      }
  
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
  
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
  
        request.open('GET', url, true);
        request.send(null);
      }
  
      function doNothing() {}
  
      //]]&gt;
  
    &lt;/script&gt;
   &lt;style&gt;
  
   &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body onload="load()"&gt;
      &lt;div id="map" style="width: 550px; height: 250px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>is there any way to style info window use css or javascript.                                              </p>
  
  <p>please see the below css</p>
  
  <pre><code>.infoWindow {
      display:none;
  }
  .infoWindow {
      border:2px solid black;
      margin-top: 8px;
      background:#333;
      color:#FFF;
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      padding: .5em 1em;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      text-shadow:0 -1px #000000;
      -webkit-box-shadow: 0 0  8px #000;
      box-shadow: 0 0 8px #000;
  }
  </code></pre>