Google지도 여러 마커 간단한 필터링

Question

122 개의 마커, 여러 카테고리 (12)로 Google지도를 설정했습니다. 양식에서 마커를 켜거나 끄기 위해 각 마커가 사용하는 이미지에 따라 필터를 만들 수 있습니까? 다른 변수를 "카테고리"변수로 정의하는 것이 더 좋습니까? JQuery를 사용하는 경우 코드가 작동하도록 어떻게 구조를 바꿀 수 있습니까?

어떤 아이디어라도 감사 할 것입니다.

function initialize() { 

var myOptions = { 
    center: new google.maps.LatLng(,), 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
};   
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 

var image = [];    //define an array to store category images 
image['church']='icons/chapel-2.png' 
image['monastery']='icons/convent-2.png' 
image['archaeo']='icons/monument.png' 
image['wild']='icons/wildlife.png' 
image['museum']='icons/museum_openair.png' 
image['beach']='icons/beach.png' 
image['must']='icons/star.png' 
image['summit']='icons/peak.png' 
image['cave']='icons/cave-2.png' 
image['forest']='icons/palmTree.png' 
image['gorge']='icons/canyon-2.png' 
image['village']='icons/smallcity.png' 

//define 122 markers as below until var marker122 (no comments here I am trying to keep it simple.. 

     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(,), 
     map: map, 
     title: 'placeName', 
     clickable: true, 
     icon: image['must'] 
}); 

HTML은 다음과 같습니다 :

의 JScript는 다음과 같습니다

<form action="#"> 
Must Visit: <input type="checkbox" id="mustbox" onclick="boxclick(this,'must')" /> &nbsp;&nbsp; 
      Beaches: <input type="checkbox" id="beachbox" onclick="boxclick(this,'beach')" /> &nbsp;&nbsp; 
      Archaeology: <input type="checkbox" id="archaeobox" onclick="boxclick(this,'archaeo')" /> &nbsp;&nbsp; 
      Church: <input type="checkbox" id="religionnbox" onclick="boxclick(this,'church')" /> &nbsp;&nbsp; 
     Monastery: <input type="checkbox" id="conventbox" onclick="boxclick(this,'convent')" /> &nbsp;&nbsp; 
     Gorge: <input type="checkbox" id="gorgebox" onclick="boxclick(this,'gorge')" /> &nbsp;&nbsp; 
      Cave: <input type="checkbox" id="cavetbox" onclick="boxclick(this,'cave')" /> &nbsp;&nbsp; 
      Forest: <input type="checkbox" id="forestbox" onclick="boxclick(this,'forest')" /> &nbsp;&nbsp; 
      Wildlife: <input type="checkbox" id="wildbox" onclick="boxclick(this,'wild')" /> &nbsp;&nbsp; 
      Museum: <input type="checkbox" id="museumbox" onclick="boxclick(this,'museum')" /> &nbsp;&nbsp; 
     Villages: <input type="checkbox" id="villagebox" onclick="boxclick(this,'village')" /><br /> 
      Mountain Summit: <input type="checkbox" id="summitbox" onclick="boxclick(this,'summit')" /><br /> 

Answer 1

여러지도 표시 자에 필터를 만들면 매우 효율적으로 작동합니다. 나는 프로젝트 중 하나에서 그것을했다. 필터로 드롭 다운이있는 경우 드롭 다운 필터의 선택된 값에 대한 가시성 속성을 표시하거나 숨기도록 설정하여지도 작성기 개체에 적용됩니다. 이렇게하려면 javascript에서 collection (array) 작업을해야합니다. 처음에는 모든 Google 마커 개체를 컬렉션에 추가합니다. 필터가 선택되면지도 표시 객체의 속성을 해당 컬렉션에서 변경하면 표시 여부, 이미지 및 기타 속성과 같은 속성을 변경할 수 있습니다. 당신은 매우 효율적으로 작동하는 것을 볼 수 있습니다. 필터를 선택한 시점에 새로운 객체를 생성하지 마십시오.지도에 평탄하지 않습니다.

Answer 2

확인합니다. 비슷한 일을했지만 정확히 프로젝트를 찾을 수 없습니다. 배열에 마커를 추가하고 해당 배열을 반복하고 클릭 한 체크 상자에 따라 표시/숨기기로했습니다.

// Create an array 
var markersFacebook = []; 

// Create a marker 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(,), 
    map: map, 
    title: 'placeName', 
    clickable: true, 
    icon: image['must'] 
}); 

// Add the marker to an array of your choice. You'll have one for each category 
markersFacebook.push(marker); 

// Now you can show and hide your markers by looping through the array 
function toggleMarkers(visible) 
{ 
    jQuery(markersFacebook).each(function(id, marker) { 
     // Hide or show the marker here depending on the state of a checkbox, or whatever you like 
     marker.setVisible(visible); 
    }); 
} 

toggleMarkers(false); // This should hide all the markers 

죄송합니다. 완전한 예제를 제공 할 수는 없지만 달성하려는 대상에 대해 배열 방식을 사용해야합니다.