マーカーの表示・非表示の切り替えについて

1,167 views
Skip to first unread message

e-ma

unread,
Apr 22, 2013, 3:59:36 AM4/22/13
to google-map...@googlegroups.com
お世話になります

下記ソースコードのroutedataのマーカーは常に表示し、プルダウンメニューからworkdataのマーカーのみ
表示・非表示を切り替えたいと思っています。
routedataとworkdataの表示まではできたのですが、workdataのマーカーを非表示にするメニューを
選択した際に、以下のエラーが出てマーカーを非表示にできません。

"TypeError: wMarker.setMap is not a function"

以下ソースコードです。
var map;
var routedata = new google.maps.MVCArray([
  [34.64815, 133.91136], [34.64995, 133.91264], [34.65272, 133.91242], [34.65610, 133.91228], [34.65896, 133.91228],
  [34.65915, 133.91544], [34.65913, 133.91858], [34.66130, 133.91903], [34.66399, 133.91894], [34.66524, 133.91851]
]);

var workdata = new google.maps.MVCArray([
  [34.64815, 133.91136], [34.65610, 133.91228], [34.65927, 133.91909], [34.66399, 133.91894], [34.66524, 133.91851]
]);

var rMarker;
var wMarker;

function loadmap(placeholder, lat, lng, z) {
  var mapOpts = {
    zoom: 16,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById(placeholder),mapOpts);

  routedata.forEach(function(routedata, index) {
    var latlng = new google.maps.LatLng(routedata[0], routedata[1]);
    rWarker = new google.maps.Marker({
      position: latlng,
      map: map
    });
  });
}

/* select onChange　マーカー表示切替 */
function changemap(obj) {
  mapmode = obj.options[obj.selectedIndex].value;
  if ("route" == mapmode) { // workdataのマーカーを非表示
    workdata.forEach(function(wMarker, i) {
      wMarker.setMap(null);
    });
  } else if ("work" == mapmode) { // workdataのマーカーを表示
    workdata.forEach(function(workdata, i) {
      var latlng = new google.maps.LatLng(workdata[0], workdata[1]);
      wMarker = new google.maps.Marker({
        position: latlng,
        map: map
      });
    });
  }
}



見苦しいコードで申し訳ないですが、修正方法等ご教授いただけますようお願いします。


GMapApi Yuu

unread,
Apr 22, 2013, 6:57:13 AM4/22/13
to google-map...@googlegroups.com
ゆうです。

動かない原因としては、以下のwMarkerにわたる値がworkdataの要素だからです。
changemap関数の
// workdataのマーカーを非表示
    workdata.forEach(function(wMarker, i) {

setMapメソッドはMarkerのメソッドなので、not functionでエラーとなっています。

今回のパターンでは、MarkerManagerを使用すると良いかも知れません。
ポイントは以下の３つです。それぞれの箇所に記述すれば動くかと思います。

// MarkerManagerの宣言
var markerManager;

// loadmap関数内に追加

markerManager = new MarkerManager(map);
google.maps.event.addListener(markerManager, 'loaded', function() {
workdata.forEach(function(workdata, index) {
var latlng = new google.maps.LatLng(workdata[0], workdata[1]);
wWarker = new google.maps.Marker({
position: latlng,
map: map
});
markerManager.addMarker(wWarker, 0);
});
markerManager.hide();
});

// changemap関数内の処理変更

mapmode = obj.options[obj.selectedIndex].value;
if ("route" == mapmode) { // workdataのマーカーを非表示
markerManager.hide();
} else if ("work" == mapmode) { // workdataのマーカーを表示
markerManager.show();
}

以上、よろしくお願いいたします。



2013年4月22日 16:59 e-ma <e-ma...@bee-u.com>:


--
このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。
このグループから退会し、メールの受信を停止するには、google-maps-api-...@googlegroups.com にメールを送信します。
このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/google-maps-api-japan?hl=ja からこのグループにアクセスしてください。
その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。
 
 

GMapApi Yuu

unread,
Apr 22, 2013, 6:58:48 AM4/22/13
to google-map...@googlegroups.com
ゆうです。

ライブラリのスクリプトタグの記述が抜けていました。
ヘッダにでも追加してください。

以上、よろしくお願いいたします。



2013年4月22日 19:57 GMapApi Yuu <yuu.g...@gmail.com>:

e-ma

unread,
Apr 22, 2013, 10:16:04 PM4/22/13
to google-map...@googlegroups.com
ゆうさん

返信が遅くなり、すいません。
アドバイスいただいたとおりに修正しましたところ、
期待した結果が得られることができました。

詳細なアドバイスをありがとうございます。



2013年4月22日月曜日 19時58分48秒 UTC+9 ゆう:
このグループから退会し、メールの受信を停止するには、google-maps-api-japan+unsubscribe@googlegroups.com にメールを送信します。
このグループに投稿するには、google-maps-api-ja...@googlegroups.com にメールを送信してください。
Reply all
Reply to author
Forward
0 new messages