jQuery Ui지도 - gmap 메서드를 두 번 이상 사용하십시오.

Question

지도 필터링과 jQuery Ui Map 플러그인을 사용하고 있습니다. 필터링을 위해 아래 코드를 사용합니다.

$('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() { 

    $.getJSON('path to json', 'category=activity', function(data) { 

     $.each(data.markers, function(i, m) { 

      $('#map_canvas').gmap('addMarker', { 'tag': [m.area], 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true }) 

      .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); }); 


     }); 
    }); 

    $("#some").change(function() { 
          var bounds = new google.maps.LatLngBounds(); 
          var tag = $(this).val(); 
          if (tag == '*') { 
           $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) { 
            marker.setVisible(true); 
            bounds.extend(marker.position); 
            marker.map.fitBounds(bounds); 
           }); 
          } else { 
           $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) { 
            if (isFound) { 
        marker.setVisible(true); 
             bounds.extend(marker.position); 
             marker.map.fitBounds(bounds); 
            } else { 
             marker.setVisible(false); 
            } 
           }); 
          } 
          $('#map_canvas').gmap('option', 'center', bounds.getCenter()); 
         }); 
       } 
    }); 

그래서 JSON의 모든 마커는 선택 상자에 할당 된 태그에 따라 필터링됩니다.

는하지만 내가 달성하고자하는 것은 온 클릭 (바로지도 아래에 나열되어 있습니다) 특정 상점 이름의는 해당 마커가지도에 표시해야합니다.

나는 에 jQuery Ui지도으로 마커를 추가하려고했습니다. 그러나 나는 우리가 내가 그 다른 접근 방식을 사용 .gmap 더 이상의 시간 낭포 사용할 수 없습니다 생각 :

$(".lstore").click(function() { 

     var clat = $(this).attr('data-value-lat'); 
     var clng = $(this).attr('data-value-lng'); 
     var myLatlng = new google.maps.LatLng(clat,clng); 
     var mapOptions = { 
     zoom: 17, 
     center: myLatlng 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: 'Hello World!' 
     }); 
    }); 
    }); 

자사가 문제 나누었다 내 원하는 결과에 따라 작업에 의해,이다 위의 코드를 사용하여 필자가 선택 상자를 사용하여 만든 필터 (이 코드는이 질문의 시작 부분에 있음)가 더 이상 작동하지 않습니다 (저장소 이름을 클릭하지 않을 때까지 작동 함).

그래서 필터를 상점 이름을 클릭 할 때 사용할 수있게하려면 해당 마커도지도에 표시되어야합니다.

대체로 대체이 있습니까? 이것을 어떻게 할 수 있습니까?

Answer 1

지도를 다시로드 할 필요는 없습니다. onClick 후 마커를 지우고 선택한 상점의 마커가있는지도를 다시 그립니다.
이 시도 :
1) 지우기 마커 :

// To remove the marker from the map 
 
marker.setMap(null);

2) 다음에 활성 마커로지도를 다시 그리기.

// To add the marker to the map, call setMap(); 
 
marker.setMap(map);

PS : 당신의 클릭 기능에서 var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);를 제거하십시오. 지도를 새로 고침 할 필요가 없습니다. 이 경우에는 성능면에서도 효율적이지 않습니다.

유용한 링크 & 여기에 예제 : https://developers.google.com/maps/documentation/javascript/markers#add