0
내 목표는 사용자가지도 상단에서 선택한 옵션에 따라 결과를 필터링 할 수있게하는 것입니다. 아무도 내가이 코드를 정리하고 기능을 수행하도록 도울 수 있다면 당신의 노력에 크게 감사 할 것입니다.태그로 검색 Google지도 API V3
이 첫 부분은 필자가 필터링하고자하는 4 가지 옵션을 설정합니다. 나는 마커를 추가 할 때
<div id="Filters" style="margin:5px;background:#f4f4f4;border:1px solid #888;padding:5px 5px 5px 10px;">
<label style="color:#555;font-size:12px; font-weight:bold;" for="tags">Filter by: </label>
<select id="tags" style="outline:none;">
<option value="all">All</option>
<option value="Western">Western</option>
<option value="Central">Central</option>
<option value="Eastern">Eastern</option>
</select>
</div>
(function() {
// Creating an array that will contain hhs icons
var hhsIcons = [];
hhsIcons['Eastern'] = new google.maps.MarkerImage('{!$Resource.markerE}' );
hhsIcons['Western'] = new google.maps.MarkerImage('{!$Resource.markerW}' );
hhsIcons['Central'] = new google.maps.MarkerImage('{!$Resource.markerC}' );
window.onload = function() {
// Create object literal containing the properties of the map
var options = {
zoom:5,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// Create the map
var map = new google.maps.Map(document.getElementById('map'),
options);
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(homeControlDiv);
var eastControlDiv = document.createElement('DIV');
var eastControl = new EastOnly(eastControlDiv, map);
eastControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(eastControlDiv);
var jsonData = {'jsonaccounts':
[
<apex:repeat value="{!Accounts}" var="abc">
{
'lat': '{!abc.Latitude__c}',
'lng': '{!abc.Longitude__c}',
'hhs': '{!abc.HHS_Region__c}'
},
</apex:repeat>
]};
var accountname = [];
var director = [];
var vp = [];
var division = [];
//Add field data for each account into respective arrays
<apex:repeat value="{!Accounts}" var="acc">
accountname.push("{!acc.name}");
director.push("{!acc.hhs_director__r.name}");
vp.push("{!acc.area_vp__r.name}");
division.push("{!acc.HHS_Region__c}");
</apex:repeat>
// Create a variable that will hold the InfoWindow object
var infowindow;
var markers = [];
// Loop through the jsondata
for (var i = 0; i < jsonData.jsonaccounts.length; i++) {
var jsonaccounts = jsonData.jsonaccounts[i];
// Create marker data
var myMarkerData = { // collecting all custom data that you want to add
region : jsonaccounts.hhs, // to the marker object within an array.
}
는, 나는이 코드는 유용 경우 제가 확실하지 않다 특정 카테고리
// Adding the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(jsonaccounts.lat,
jsonaccounts.lng),
map: map,
icon: hhsIcons[jsonaccounts.hhs],
data: myMarkerData
});
marker.region = jsonaccounts.hhs;
markers.push(marker);
alert(markers[i].region);
// Wrap the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Create the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker,
'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Set the content of the InfoWindow
infowindow.setContent('<b>' + accountname[i] + '</b>' +
'<br/>Director: ' + director[i] +
'<br/>VP: ' + vp[i] +
'<br/>Division: ' + division[i] +
// Tie the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, marker);
}
}; })();
에 의해 필터링 할 수 있도록 내가 각각의 카테고리를 만들 필요가 있다고 생각하지만, 그것은 제가 중단 한 곳이었습니다
marker.region = region;
markers.push(marker); function
hide(region) {
for (var i=0; i<map.markers.length; i++) {
if (map. markers[i].region == region) {
map.markers[i].setVisible(false);
}
}
</script>