title: Google Maps API not working & Options
body: <p>I cannot understand what I am doing wrong? I have followed tutorial after tutorial and still my scroll wheel will not disable. I have the API &amp; the options telling scroll wheel to stop but it doesn't. </p>
  
  <p>The Header Section</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOUIGHpD4lCFJ-lQ0n-sCXmkZ1_pQ8pjY&amp;sensor=false"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
    function initialize() {
      var mapCanvas = document.getElementById('map_canvas');
      var mapOptions = {
        center: new google.maps.LatLng(44.5403, -78.5463),
        scrollwheel: false,
        zoom: 8,
        zoomControl: false,
        disableDefaultUI: true,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(map_canvas, map_options);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>The Body Section</p>
  
  <pre><code> &lt;div id="map_canvas"&gt;
  
         &lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24141.27049823528!2d-74.06035544999999!3d40.8574141!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2f9b0a40235f7%3A0xd81a483d6e7a2235!2sTeterboro%2C+NJ!5e0!3m2!1sen!2sus!4v1395840447571" width="100%" height="450" frameborder="0" style="border:0"&gt;&lt;/iframe&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>The site is live <a href="http://new.northernarchitecturalsystems.com/pages/contact.html" rel="nofollow">http://new.northernarchitecturalsystems.com/pages/contact.html</a>.</p>
  
  <p>Any help is appreciated.</p>