title: cant see the actual map when using google maps api
body: <pre><code>&lt;!DOCTYPE&gt;
  </code></pre>
  
  <p>
    
      
      </p>
  
  <pre><code>&lt;style type="text/css"&gt;
    body {
      margin: 0;
      padding: 10px 20px 20px;
      font-family: Arial;
      font-size: 16px;
    }
  
    #map-container {
      padding: 6px;
      border-width: 1px;
      border-style: solid;
      border-color: #ccc #ccc #999 #ccc;
      -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
      -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
      box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
      width: 100%;
    }
  
    #map {
      width: 100%;
      height: 98%;
    }
  
  &lt;/style&gt;
  
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="data/weblandmark.json"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/markerclusterer.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    function initialize() {
      var center = new google.maps.LatLng(48.133333, 11.566667);
  
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
  
      var markers = [];
      for (var i = 0; i &lt; 100; i++) {
        var dataPhoto = data.weblandmarks[i];
        var latLng = new google.maps.LatLng(dataPhoto.latitude,
            dataPhoto.longitude);
        var marker = new google.maps.Marker({
          position: latLng
        });
        markers.push(marker);
      }
      var markerCluster = new MarkerClusterer (map, markers);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
    
  
  <p>
  </p>
  
  <p>I am using maps api with markercluster to show many places
  I can see the zoom bar, and also the cluster generated by markercluster but not the actual map image
  why?</p>