質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.01%

googlemapマーカー絞り込みについて

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 71

mtw1219mtw

score 0

前提・実現したいこと

当方、googlemap APIを用いて、サイトを作成しております。
マーカーを複数表示させ、そこからチェックボックスを用いて、
条件設定することで、表示されているマーカーが徐々に絞り込まれる
仕様を作りたいと考えています。

イメージ:https://map.mcdonalds.co.jp/

発生している問題・エラーメッセージ

インターネット上から、ラジオボタンを用いて、
マーカーをカテゴリー別に表示させる方法が紹介
されているサイトがあり、そこをヒントに継ぎはぎで
コードを組み立てました。

しかしながら、チェックボックスにチェックをいれた際に、
適切に絞り込ません。
絞り込まれているというか、単純に表示が切り替わっているだけのようです。

インターネット上から長い間、調べているのですが、
当方初心者につき、なかなかヒントが見いだせず困っています。

お知恵のある方がいらっしゃいましたら、ご指導を頂ければと
思っています。宜しくお願い致します。

※下記ソースはhtml、css、javascriptすべて含まれています。
googlemapを表示させるためのいわゆる、APIキーは表示していません。
ご了承下さい。(●●●としています)

該当のソースコード

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="content-language" content="ja"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false&key=●●●●●●●"></script>


<SCRIPT language="JavaScript">
var stationList=[
{"latlng":[35.68124535730683,139.76711004785045],name:'東京駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:1,cate2:1,cate3:1,cate4:1,cate5:1},
{"latlng":[35.67496146016916,139.7627367515206],name:'有楽町駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:0,cate2:0,cate3:0,cate4:1,cate5:1},
{"latlng":[35.666388431398566,139.75833477085803],name:'新橋駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:0,cate2:0,cate3:1,cate4:1,cate5:1},
{"latlng":[35.628491751490785,139.73875835889544],name:'品川駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:1,cate2:1,cate3:1,cate4:1,cate5:0},
{"latlng":[35.5314352615592,139.69688397085815],name:'川崎駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:1,cate2:1,cate3:1,cate4:1,cate5:0},
{"latlng":[35.4658292308726,139.6223219171793],name:'横浜駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:0,cate2:0,cate3:1,cate4:1,cate5:1},
{"latlng":[35.25645914932192,139.15539822914184],name:'小田原駅',icon:"https://zentoren.or.jp/img/map_icon1.png",cate0:1,cate1:0,cate2:1,cate3:1,cate4:0,cate5:0}
];

var infoWnd = new google.maps.InfoWindow();
var markerController = new google.maps.MVCObject();
function initialize() {
geocoder = new google.maps.Geocoder();  
var mapDiv = document.getElementById("map");
mapCanvas = new google.maps.Map(mapDiv);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

var i, choise = [
document.getElementById("cate0"),
document.getElementById("cate1"),
document.getElementById("cate2"),
document.getElementById("cate3"),
document.getElementById("cate4"),
document.getElementById("cate5")
   ];

for (i = 0; i < choise.length; i++) {
    google.maps.event.addDomListener(choise[i], "click", selectChanged);
        }

        var bounds = new google.maps.LatLngBounds();
        var station, latlng;

for ( i = 0; i < stationList.length; i++) {
    station = stationList[i];
    latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
    bounds.extend(latlng);
    var marker = createMarker({
    map : mapCanvas,
    position : latlng,
    icon: stationList[i].icon,
    others : station
    });

createMarkerButton(marker);
        }
        mapCanvas.panTo(new google.maps.LatLng(35.56690133592941, 139.71484922225966));
        mapCanvas.setZoom(9);
        markerController.set("select", "cate0");
        google.maps.event.trigger(choise[6], "click");
      }

      function selectChanged() {
        var selectedVal = this.value;
        markerController.set("select", selectedVal);
      }

 //マーカーがクリックされたら、情報ウィンドウを表示
      function createMarker(params) {
        var marker = new google.maps.Marker(params);
        google.maps.event.addListener(marker, "click", function() {
          infoWnd.setContent("<strong>" + params.others.name + "</strong>");
          infoWnd.open(params.map, marker);
        });

        // marker.select = markerController.select として連動させる。
        // markerController.select が変化すると、marker.select も変化して
        // select_changedイベントが発生する
        marker.bindTo("select", markerController, "select");
        google.maps.event.addListener(marker, "select_changed", changeMarkerVisibility);
        return marker;
      }


    //markerControllerのselectプロパティが変化したら、
      //params.others.の値を調べてマーカーの表示/非表示を変更する
      function changeMarkerVisibility() {
        //this は markerを指す
        var marker = this;
        var others = marker.get("others");

 //選択された値
        var selectedVal = marker.get("select");


        // 1ならtrue、0ならfalse
        marker.setVisible( others[selectedVal] ? true : false );
      }


      function createMarkerButton(marker) {
        var others = marker.get("others"),
            i, name, ul, li,
            listNames = [
    "cate0",
    "cate1",
    "cate2",
    "cate3",
    "cate4",
    "cate5"
    ];


      }


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

</SCRIPT>


<style type="text/css">
#frame{position:relative;width:100%;height:600px;border:1px solid #ccc}
#site-box-onlymap{
    background-color : #FFFFFF;
    width : 1500px ;
    margin : 1.5px auto;
    font-size : 15px ;
    letter-spacing:-0.5px;
    text-align:left;
}
</style>

</head>

<!-----------------------↑ここまでhead--------------------------------->




<body background="img/haikei.png" bgproperties="fixed" onload="initialize()">
<!-------------↓ここIE調整↓------------->
<div style="text-align:center;">
<!-------------↑ここIE調整↑------------->
<div id="mapright-box"><!--map--><div id="map" style="height:95%"></div><!--map--></div>
<div id="mapleft-box">
<a href="" onclick="location.reload();return false"><B>全体表示</B></a>
<input type="checkbox" name="shinkansen" value="cate0" id="cate0">
<HR>
<B>カテゴリー</B><BR>
<input type="checkbox" name="shinkansen" value="cate1" id="cate1">のぞみ停車
<input type="checkbox" name="shinkansen" value="cate2" id="cate2">こだま停車
<input type="checkbox" name="shinkansen" value="cate3" id="cate3">東海道線停車
<input type="checkbox" name="shinkansen" value="cate4" id="cate4">京浜東北線停車
<input type="checkbox" name="shinkansen" value="cate5" id="cate5">地下鉄接続
</div>
<!-------------↓ここIE調整↓------------->
</div>
<!-------------↑ここIE調整↑------------->
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる