title: Google Maps v3: Map is not showing
body: <p>Can you please help me with this problem in [Google Maps API]?
  I do not know why the map is not displaying.</p>
  
  <p><a href="http://jsfiddle.net/TZyCP/2/" rel="nofollow noreferrer">Here's the fiddle.</a></p>
  
  <p><strong>Javascript:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Map Options
  var roadmap = {
    infoWindow: new google.maps.InfoWindow(),
    options: {
      map: {
        center: new google.maps.LatLng(34.02238, -118.293338),
        zoom: 15,
        mapTypeId: 'roadmap'
      },
      marker: {
        position: roadmap.options.center,
        title: "Hello",
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
        shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
      }
    }
  };
  
  //Street view Options
  var StreetView = {
    options: {
      position: roadmap.options.map.center,
      zoom: 1
    }
  };
  
  
  
  //Functions
  function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
      infoWindow.getContent();
      marker.openInfoWindowTabsHtml(infoTabs);
    });
  }
  
  
  function googleMaps() {
    //Road map
    roadmap.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map);
  
  
    //Road map's Marker
    roadmap.options.marker.map = roadmap.map;
    roadmap.marker = new google.maps.Marker(roadmap.options.marker);
  
  
    //Street view map
    StreetView.map = new google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), StreetView.options);
  
  
    //Bind onClick to marker &amp; infoWindow
    bindInfoWindow(roadmap.marker, roadmap.map, roadmap.infoWindow, roadmap.options.marker.title);
  } //end of load()
  
  
  /*Load | Call googleMaps after document is loaded*/
  google.maps.event.addDomListener(window, 'load', function() {
    googleMaps();
    //... (add more code here)
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>HTML:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- START: Google Maps API --&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="this_map.js"&gt;&lt;/script&gt;
  &lt;!-- __END: Google Maps API --&gt;
  
  &lt;div id="map-container" &gt;
    &lt;div id="map_StreetView" style="width: 350px; height: 250px"&gt;&lt;/div&gt;&lt;br/&gt;
    &lt;div id="map" style="width: 350px; height: 250px"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Any help with this would be appreciated.</p>