title: Google Map tutorial not working
body: <p>I am following tutorial <strong><a href="https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map" rel="nofollow">"Adding a Google Map to your website"</a></strong></p>
  
  <p>But for some reason its not working... may be i missed something..</p>
  
  <h2><strong><a href="http://jsfiddle.net/Imran_Bughio/DVT7B/" rel="nofollow">FIDDLE</a></strong></h2>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#map_canvas {
      width: 500px;
      height: 400px;
      background-color: #CCC;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function () {
      function initialize() {
          var map_canvas = document.getElementById('map_canvas');
          var map_options = {
              center: new google.maps.LatLng(44.5403, -78.5463),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  });
  </code></pre>
  
  <p><strong>Note:</strong> In the fiddle resources i have added <strong><a href="https://maps.googleapis.com/maps/api/js?sensor=false" rel="nofollow">Google-Api</a></strong></p>
  
  <p>I just cant figure-out what did i do wrong... html, css &amp; java script all are the same as in the tutorial.. i even added <code>$(function (){</code> to make sure script loads after document but didn't helped...</p>