1

srcollwheel:truescrollwheel: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>

1 件の回答 1

1

この問題起こす原因は多分map変数のスコープです。

kphex氏のコードの1行目にmap変数を宣言したですけど、initialize()の中にまだ、もう一度map変数を宣言しまった。だから、new google.maps.Map(document.getElementById("sp_map_canvas"), myOptions)のスコープはinitialize()だけに成りしまった。このせいtoEnable()の中のmapの中はundefinedです。


var map = new google.maps.Map(document.getElementById("sp_map_canvas"), myOptions);

から

map = new google.maps.Map(document.getElementById("sp_map_canvas"), myOptions);

へに修正すると、エラーを消えれると思います。

1
  • 返信が遅くなり申し訳ございませんでした。こちらkahoさんの手法で問題なく実装できました。ありがとうございます!
    – user76333
    Commented 2015年8月5日 5:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。