0
私の目標は、地図上で選択したオプションに基づいて結果をフィルタリングできるようにすることです。誰でもこのコードを整理して機能させることができたら、私はあなたの努力を大いに感謝します。タグでGoogle Maps API V3をフィルタ
この最初の部分は、フィルタリングしたい4つのオプションを設定します。
私はマーカーを追加すると、私はそれは私が特定のカテゴリ// 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);
}
}; })();
でフィルタリングできるようになるので、それぞれのカテゴリを作成する必要があると思う
<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.
}
私はこのコードが有用であるかどうかわからないけど、それは私が中止したところでした
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>