title: HTML and google maps not playing nice
body: <p>I have a custom google map. It seems very simple. </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;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  
    &lt;!--google magic--&gt;
    &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
    &lt;!--custom map--&gt;
    &lt;script type="text/javascript"&gt;
      function initialize() {
        var latlngcenter = new google.maps.LatLng(41.523387, -87.691545);
        //move center west of marker to show I-57
        var myOptions = { zoom: 11, center: latlngcenter, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("GardenWalk_Canvas"), myOptions);
        var latlng;
        var marker;
        latlng = new google.maps.LatLng(41.503387, -87.636545);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.520935, -87.582318);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.520075, -87.634509);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.538092, -87.677964);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.536256, -87.678006);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.533099, -87.682250);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.550018, -87.691408);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.550017, -87.691305);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.508768, -87.693976);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.509065, -87.694586);
        marker = new google.maps.Marker({ position: latlng, map: map });
        latlng = new google.maps.LatLng(41.498524, -87.810122);
        marker = new google.maps.Marker({ position: latlng, map: map });
      }
    &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
    &lt;div id="GardenWalk_Canvas" style="width: 500; height: 350" /&gt;
    text after
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The only problem is that the map only shows when the following is removed:</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>Any thoughts or rhyme or reason as to why?</p>