title: Google Maps InfoWindow Z-Index
body: <p>Is it possible for an InfoWindow to popup <strong>over</strong> an element which has a higher Z-Index than the google map?</p>
  
  <p>So lets say the google map has a z-index of Zero. The element has a z-index of 100. 
  Clicking a marker displays an InfoWindow in the same region as the element. How do we get this InfoWindow to hover over the element and not under it?</p>
  
  <p>I have tried setting the InfoWindow's z-Index to a higher value, but this does not appear to do anything. </p>
  
  <p>I've put together a demo below demonstrating the issue.
  Any assistance would be appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  </code></pre>
  
  <p> </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Infowindow Z-Index Test&lt;/title&gt;
  
      &lt;script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;                   
      &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;          
  
      &lt;script language="Javascript" type="text/javascript"&gt;
          var coords = [[35.50733, 35.12768, 3]]; //, [-23.806549, 133.96059, 13], [68.169002, -134.425964, 10], [69.529715, -132.109222, 10], [80.231047, -22.730713, 7], [35.108675, -117.961578, 12]];
          var map;            
  
          function mapChoose(coords) {
              var current = coords[Math.floor(Math.random() * (coords.length))];
              //mapShow(current[0], current[1], current[2], document.getElementById('map'));
              mapShow(current[0], current[1], current[2], document.getElementById('map_canvas'));
          };
  
          function initialize() {
  
              mapChoose(coords);
          }
  
          function mapShow(lat, lng, zoom, div) {
              var myOptions = {
                  'zoom': zoom,
                  'center': new google.maps.LatLng(lat, lng),
                  'mapTypeId': google.maps.MapTypeId.SATELLITE,
                  'disableDefaultUI': true,
                  'scrollwheel' : false,
                  'draggable': false
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
              // markers
              // load markers - us
              var marker3 = new google.maps.Marker({
                  position: new google.maps.LatLng(40.71435, -74.00597),
                  map: map,
                  icon: 'http://google-maps-icons.googlecode.com/files/kitesurfing.png',
                  draggable: true
              });
              marker3.setTitle("New York");                
  
  
              // info windows                
              var contentString = $("#divContentForInfoWindow").html();
              $("#divContentForInfoWindow").html('');
  
  
              infowindow3 = new google.maps.InfoWindow({
                  content: contentString, zIndex: 5000 // this ZIndex property doesnt appear to do anything.
              });
  
              google.maps.event.addListener(marker3, 'click', function () {
                  infowindow3.open(map, marker3);
  
              });
  
          };
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body onload="initialize()" onunload="GUnload()"&gt;
  
      &lt;!-- Google canvas element | Z-Index of 0 --&gt;
      &lt;div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;"&gt;&lt;/div&gt;         
  
  
      &lt;!-- Floating block of text | Z-Index of 100  --&gt;
      &lt;div id="FloatingBlock" style='z-index: 100;position: absolute;left: 50px;top:75px;font-size: 16px;width: 525px;text-align: left;color: #111;background-color:#fff;opacity:.80;filter:alpha(opacity=80);'&gt;
  
          &lt;b&gt;This layer is floating above the google map because the Z-Index has been set higher. &lt;br /&gt;&lt;/b&gt;
  
          Hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt;
          hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt; 
          Hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt; 
          hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt; 
          Hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt; 
          hello world hello world hello world hello world hello world hello world hello world&lt;br /&gt; 
  
          &lt;div class="text"&gt;
  
            &lt;!-- &lt;input type="button" id="btntest" value="Open Info Window" onclick="showInfoWindow2();" /&gt;&lt;input type="button" id="btntest2" value="hide Info Window" onclick="hideInfoWindow2();" /&gt;--&gt;
      &lt;/div&gt;
  
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
      &lt;/div&gt;      
      &lt;!-- / can delete this, not used --&gt;
  
      &lt;!-- everything IN here will appear in the google maps info window --&gt;
      &lt;div id="divContentForInfoWindow"&gt;       
  
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
          This is popup content. &lt;br /&gt;This is popup content. &lt;br /&gt;
  
     &lt;/div&gt;
     &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;        
      &lt;!-- / everything in here will appear in the google maps info window --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>