title: Google Maps API v3 inside another Div
body: <p>This is a drop down Div - which works with everything except GoogleMap.</p>
  
  <p>I get half the map showing or maybe a 1/4 of it... When I get rid of the div's all works fine... Or is there a workaround without div's? Ideas... I tried declaring table, p etc... No luck...</p>
  
  <p>Javascript Drop Down Code and Div calls</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
     function showElement(layer){
     var myLayer = document.getElementById(layer);
     if(myLayer.style.display=="none"){
     myLayer.style.display="block";
     myLayer.backgroundPosition="top";
     } else { 
     myLayer.style.display="none";
     }
     }
     &lt;/script&gt;
  
    &lt;div class=catlist&gt;
    &lt;table border=0 cellpadding=4&gt;
    &lt;tr&gt;
    &lt;td valign=middle&gt;&lt;img src="images/plus.png" onclick="javascript:showElement('ed')"&gt;&lt;/td&gt;
    &lt;td valign=middle&gt;&lt;a href="#" onclick="javascript:showElement('ed')"&gt;&lt;b&gt;Edit GPS 
    Map&lt;/b&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;&lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="qlist" id="ed" style="display:none;"&gt;
  
    &lt;div id="map" style="width: 500px; height: 250px;"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>Adding the Google Javascript...</h2>
  
  <p>This is the actual Google Maps Javascript...
  Cold Fusion Plots the # markers...
  This works fine outside of divs...
  Code suggested above works to display the correct map interface...
  But the centering of the plot is not working...
  And marker shows at top left corner with above code provided...</p>
  
  <pre><code>  &lt;div id="map" style="width: 500px; height: 250px;"&gt;&lt;/div&gt;
    &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;
    &lt;/script&gt; 
  
    &lt;script type="text/javascript"&gt; 
  
    var locations = [ 
  ["#bsname#", #gpslat#, #gpslong#, #busid#], 
    ]; 
  
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: new google.maps.LatLng(#gpslat#, #gpslong#), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }); 
  
    var infowindow = new google.maps.InfoWindow(); 
  
    var marker, i; 
  
    for (i = 0; i &lt; locations.length; i++) {   
    marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
    }); 
  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
      } 
    })(marker, i)); 
    } 
  
  &lt;/script&gt;    
  </code></pre>