Google Map ApiでCannot read property 'setOptions' of undefinedエラーが出る

srcollwheel:trueとscrollwheel:falseをボタンによって切り替えをしたいのですが、タイトルのエラー：Uncaught TypeError: Cannot read property 'setOptions' of undefinedが吐き出されてしまいます。

var map;

function initialize() {
  var latlng = new google.maps.LatLng(35.681452800000000, 139.765979600000000);
  var myOptions = {
    zoom: 13,
    center: latlng,
    panControl: false,
    scrollwheel: false,
    zoomContorl: false,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("sp_map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "hoge"
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

function toEnable() {
  var myOptions = {
    scrollwheel: true
  };
  map.setOptions(myOptions);
}

function toDisable() {
  var myOptions = {
    scrollwheel: false
  };
  map.setOptions(myOptions);
}

$(document).ready(function() {
  var scrollSwitch = $('#scrollSwitch');
  scrollSwitch.on('click'function() {
    if ($(this).attr('data-toggled') == 'on') {
      $(this).attr('data-toggled', 'off');
      toEnable();
    } else {
      $(this).attr('data-toggled', 'on');
      toDisable();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="sp_map_canvas"></div>
<button id="scrollSwitch" data-toggled="on">Switch</button>