Looking for a way to filter the map markers using pure javascript based upon multiple conditions if they exist. This is based upon having potentially 4 potential filters possible.
So imagine I have two or more field sets
- Project Type (this will be an array of project types [‘engineering’,’construction’])
- Region (this will be an array of regions [‘France’,’Italy’])
- Name (this will be string input ‘google’)
- Value (integer input ‘1000000’)
I want to filter through the markers and then include those with matching criteria. And exclude the matching criteria if it doesn’t exist or have a value set.
Example1: engineering, france, google, 1000000 Example2: construction, italy Example3: engineering, france, 1000000
Trying to achieve this in an elegant manner and not get into a nested if statement pit of hell.
Here is a working example I have setup, which accounts for two filters but isn’t as clean as I would like and allow for the inclusion of extra filters easily.
Looking to have it accurately show the information based upon the users selections. So if they choose multiple projects then show them but if they are include a region and a value show where the project type, location and other match.
JavaScript
x
131
131
1
function initMap() {2
map = new google.maps.Map(document.getElementById("map"), {3
zoom: 5,4
center: { lat: -25.77649954803059, lng: 122.03240276153382 },5
styles: darkMapStyle,6
});7
8
// Define Filter Arrays9
let project_typeFilters = [];10
let regionFilters = [];11
12
// Reset filter on reload13
resetFitlers();14
15
const infoWindow = new google.maps.InfoWindow({16
content: "",17
disableAutoPan: true,18
});19
20
// Add some markers to the map.21
for (let i = 0; i < projectData.length; i++) {22
let new_marker = new google.maps.Marker({23
position: { lat: projectData[i].lat, lng: projectData[i].lng },24
title: projectData[i].project_title,25
});26
27
// Add marker to map28
new_marker.setMap(map);29
30
new_marker.region = projectData[i].region.toLocaleLowerCase();31
new_marker.project_type = projectData[i].project_type.toLowerCase();32
33
markers.push(new_marker);34
}35
36
console.log(markers);37
38
// Filter Specific39
function filterMining() {40
for (let i = 0; i < markers.length; i++) {41
if (markers[i].project_type == "Mining") {42
markers[i].setMap(map);43
} else {44
markers[i].setMap(null);45
}46
}47
}48
49
// Filter Specific50
function filterData() {51
//52
for (let i = 0; i < markers.length; i++) {53
if (project_typeFilters.length > 0 && regionFilters.length > 0) {54
// Filter/Show if both are true55
if (56
project_typeFilters.includes(markers[i].project_type) &&57
regionFilters.includes(markers[i].region)58
) {59
markers[i].setMap(map);60
continue;61
}62
} else if (project_typeFilters.length > 0 || regionFilters.length > 0) {63
// Filter/Show for either64
if (65
project_typeFilters.includes(markers[i].project_type) ||66
regionFilters.includes(markers[i].region)67
) {68
markers[i].setMap(map);69
continue;70
}71
}72
if (project_typeFilters.length == 0 && regionFilters.length == 0) {73
markers[i].setMap(map);74
continue;75
}76
markers[i].setMap(null);77
}78
}79
80
// Reset and show all81
function showAll() {82
resetFitlers();83
for (let i = 0; i < markers.length; i++) markers[i].setMap(map);84
}85
86
// Reset input and clear filter arrays87
function resetFitlers() {88
document.querySelectorAll(".filter").forEach((item) => {89
item.checked = false;90
});91
project_typeFilters = [];92
regionFilters = [];93
}94
95
document.getElementById("reset").onclick = showAll;96
97
document.querySelectorAll(".filter").forEach((item) => {98
item.addEventListener("click", () => {99
let type = item.getAttribute("data-type");100
let value = item.getAttribute("id");101
if (102
item["checked"] &&103
project_typeFilters.includes(value) === false &&104
type === "project_type"105
) {106
project_typeFilters.push(value);107
}108
if (109
item["checked"] &&110
regionFilters.includes(value) === false &&111
type === "region"112
) {113
regionFilters.push(value);114
}115
if (item["checked"] === false && type === "project_type") {116
const index = project_typeFilters.findIndex(117
(string) => string === value118
);119
project_typeFilters.splice(index, 1);120
}121
if (item["checked"] === false && type === "region") {122
const index = regionFilters.findIndex((string) => string === value);123
regionFilters.splice(index, 1);124
}125
filterData();126
});127
});128
}129
130
window.initMap = initMap;131
Example of projectData JSON
JavaScript
1
82
82
1
let projectData = [2
{3
id: 1,4
lat: -24.957874041168797,5
lng: 118.5013331401608,6
label: "Project Name #1",7
project_title: "Project #1 Title",8
project_url: "https://youtube.com.au",9
project_type: "Engineering",10
region: "France",11
value: "1000000",12
company: "Company Name",13
company_url: "https://www.google.com.au",14
company_email: "bob@example.com",15
project_description:16
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow. Chicken kielbasa boudin, spare ribs doner sausage short loin beef meatloaf tenderloin chislic sirloin ground round pastrami bacon. Meatball meatloaf sausage spare ribs hamburger, kielbasa strip steak ball tip pork belly flank venison. Tongue meatloaf drumstick, sausage alcatra hamburger shankle.",17
},18
{19
id: 2,20
lat: -32.83626802206395,21
lng: 116.47405764163521,22
label: "Project Name #2",23
project_title: "Project #2 Title",24
project_url: "https://youtube.com.au",25
project_type: "Construction",26
region: "Italy",27
value: "1000000",28
company: "Company Name",29
company_url: "https://www.google.com.au",30
company_email: "bob@example.com",31
project_description:32
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow. Chicken kielbasa boudin, spare ribs doner sausage short loin beef meatloaf tenderloin chislic sirloin ground round pastrami bacon. Meatball meatloaf sausage spare ribs hamburger, kielbasa strip steak ball tip pork belly flank venison. Tongue meatloaf drumstick, sausage alcatra hamburger shankle.",33
},34
{35
id: 3,36
lat: -24.957874041168797,37
lng: 118.8013331401608,38
label: "Project Name #3",39
project_title: "Project #3 Title",40
project_url: "https://youtube.com.au",41
project_type: "Construction",42
region: "France",43
value: "1000000",44
company: "Company Name",45
company_url: "https://www.google.com.au",46
company_email: "bob@example.com",47
project_description:48
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow. Chicken kielbasa boudin, spare ribs doner sausage short loin beef meatloaf tenderloin chislic sirloin ground round pastrami bacon. Meatball meatloaf sausage spare ribs hamburger, kielbasa strip steak ball tip pork belly flank venison. Tongue meatloaf drumstick, sausage alcatra hamburger shankle.",49
},50
{51
id: 4,52
lat: -21.218106010814925,53
lng: 119.86911455192619,54
label: "Project Name #4",55
project_title: "Project #4 Title",56
project_url: "https://youtube.com.au",57
project_type: "Engineering",58
region: "Italy",59
value: "1000000",60
company: "Company Name",61
company_url: "https://www.google.com.au",62
company_email: "bob@example.com",63
project_description:64
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow. Chicken kielbasa boudin, spare ribs doner sausage short loin beef meatloaf tenderloin chislic sirloin ground round pastrami bacon. Meatball meatloaf sausage spare ribs hamburger, kielbasa strip steak ball tip pork belly flank venison. Tongue meatloaf drumstick, sausage alcatra hamburger shankle.",65
},66
{67
id: 5,68
lat: -21.318106010814925,69
lng: 119.86911455192619,70
label: "Project Name #5",71
project_title: "Project #5 Title",72
project_url: "https://youtube.com.au",73
project_type: "Engineering",74
region: "France",75
value: "1000000",76
company: "Company Name",77
company_url: "https://www.google.com.au",78
company_email: "bob@example.com",79
project_description:80
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow. Chicken kielbasa boudin, spare ribs doner sausage short loin beef meatloaf tenderloin chislic sirloin ground round pastrami bacon. Meatball meatloaf sausage spare ribs hamburger, kielbasa strip steak ball tip pork belly flank venison. Tongue meatloaf drumstick, sausage alcatra hamburger shankle.",81
},82
Advertisement
Answer
Given the lack of HTML, the minimal dataset and slightly fuzzy requirements the following might ( or might not ) be the sort of thing you are looking for. I have used this approach before to filter markers on a map where the dataset was much, much larger and the number of criteria was also much larger.
The filtering of markers is handled within the changehandler function – the comments in the code will help it make sense. You should be able to adapt the logic to checkboxes
JavaScript
1
271
271
1
<!DOCTYPE html>2
<html lang='en'>3
<head>4
<meta charset='utf-8' />5
<title>Google Maps: Filter markers based upon user selected options</title>6
<style>7
body{8
width:100%;height:100vh;margin:0;padding:0;box-sizing:border-box;9
}10
#map{11
width:900px;12
height:600px;13
float:none;14
margin:5rem auto 0;15
}16
form{17
display:flex;18
width:100%;19
flex-direction:row;20
justify-content:center;21
margin:1rem auto;22
}23
select.filter{24
padding:0.75rem;25
margin:0.25rem;26
flex:127
}28
p{29
width:900px;30
margin:auto;31
float:none;32
}33
form *,p{34
font-family:monospace35
}36
</style>37
<script>38
// utility shortcuts39
const q=(e,n=document)=>n.querySelector(e);40
const qa=(e,n=document)=>n.querySelectorAll(e);41
42
let projectData = [43
{44
id: 1,45
lat: -24.957874041168797,46
lng: 118.5013331401608,47
label: "Project Name #1",48
project_title: "Project #1 Title",49
project_url: "https://youtube.com.au",50
project_type: "Engineering",51
region: "France",52
value: "1000000",53
company: "Company Name",54
company_url: "https://www.google.com.au",55
company_email: "bob@example.com",56
project_description:57
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow",58
},59
{60
id: 2,61
lat: -32.83626802206395,62
lng: 116.47405764163521,63
label: "Project Name #2",64
project_title: "Project #2 Title",65
project_url: "https://youtube.com.au",66
project_type: "Construction",67
region: "Italy",68
value: "1000000",69
company: "Company Name",70
company_url: "https://www.google.com.au",71
company_email: "bob@example.com",72
project_description:73
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow",74
},75
{76
id: 3,77
lat: -24.957874041168797,78
lng: 118.8013331401608,79
label: "Project Name #3",80
project_title: "Project #3 Title",81
project_url: "https://youtube.com.au",82
project_type: "Construction",83
region: "France",84
value: "1000000",85
company: "Company Name",86
company_url: "https://www.google.com.au",87
company_email: "bob@example.com",88
project_description:89
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow",90
},91
{92
id: 4,93
lat: -21.218106010814925,94
lng: 119.86911455192619,95
label: "Project Name #4",96
project_title: "Project #4 Title",97
project_url: "https://youtube.com.au",98
project_type: "Engineering",99
region: "Italy",100
value: "1000000",101
company: "Company Name",102
company_url: "https://www.google.com.au",103
company_email: "bob@example.com",104
project_description:105
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow",106
},107
{108
id: 5,109
lat: -21.318106010814925,110
lng: 119.86911455192619,111
label: "Project Name #5",112
project_title: "Project #5 Title",113
project_url: "https://youtube.com.au",114
project_type: "Engineering",115
region: "France",116
value: "1000000",117
company: "Company Name",118
company_url: "https://www.google.com.au",119
company_email: "bob@example.com",120
project_description:121
"Bacon ipsum dolor amet kielbasa pastrami beef ribs pig cow",122
}123
];124
125
126
function initMap() {127
let markers=[];128
let Filters={};129
130
const map = new google.maps.Map( q('#map'), {131
zoom: 5,132
center: { lat: -25.77649954803059, lng: 122.03240276153382 }133
});134
135
const infoWindow = new google.maps.InfoWindow({136
disableAutoPan: false,137
});138
139
const clickhandler=function(e){140
/* 141
open the infowindow and display the properties 142
from the JSON data for this marker in a very 143
basic format... 144
*/145
infoWindow.open( map, this );146
infoWindow.setPosition( this.position );147
infoWindow.setContent( Object.keys( this.data ).map( k=>[ k, this.data[ k ] ].join(': ') ).join('<br />') );148
};149
150
// the filter function151
const changehandler=(e)=>{152
let bounds=new google.maps.LatLngBounds();153
/* 154
If the "select" menu has an option, other than the 1st, 155
selected we add it to our list of Filters.156
*/157
if( e.target.selectedIndex==0 && Filters.hasOwnProperty( e.target.name ) ){158
delete Filters[ e.target.name ];159
}else{160
Filters[ e.target.name ]=e.target.value;161
}162
163
// hide any open infowindow164
infoWindow.close();165
166
// hide ( not remove ) all markers167
markers.forEach( mkr=>mkr.setVisible( false ) );168
169
170
/*171
Iterate through all markers and continually172
set the boolean value res by validating that the173
current Select value matches the appropriate value174
from the source data.175
*/176
let filtered=markers.filter( function( mkr ){177
let res=true;178
Object.keys( Filters ).forEach( name => {179
/* this is the important bit ! */180
res = res && Filters[ name ]===mkr.data[ name ];181
});182
return res;183
});184
185
/*186
with the returned array of matched markers we187
now set their visibility so that they are visible.188
*/189
filtered.forEach( mkr=>{190
mkr.setVisible( true );191
bounds.extend( mkr.position );192
});193
194
if( !bounds.isEmpty() ) map.fitBounds( bounds );195
};196
197
// add the markers...198
projectData.forEach(json=>{199
let args={200
position: { lat:Number( json.lat ), lng:Number( json.lng ) },201
title:json.project_title,202
data:json,/* This is ALL the json data for this marker - this is used in the filter!! */203
map:map204
};205
let marker=new google.maps.Marker( args );206
google.maps.event.addListener( marker, 'click', clickhandler );207
208
markers.push( marker );209
});210
211
212
//assign change event handlers to select menus213
qa('.filter').forEach(n=>{214
n.addEventListener( 'change', changehandler );215
});216
}217
</script>218
</head>219
<body>220
<div id='map'></div>221
<form>222
<!--223
Note that the names of these "SELECT" menus match the keys224
within the JSON source data. This is important with the above225
code as the name is used to filter the data.226
227
If the elements cannot be so named then a lookup matrix228
would be required which just adds another layer of complexity.229
-->230
<select name='project_type' class='filter'>231
<option selected>Please select "Project Type"232
<option>Engineering233
<option>Construction234
</select>235
236
237
<select name='project_title' class='filter'>238
<option selected>Please select "Project Title"239
<option>Project #1 Title240
<option>Project #2 Title241
<option>Project #3 Title242
<option>Project #4 Title243
<option>Project #5 Title244
</select>245
246
247
<select name='region' class='filter'>248
<option selected>Please select "Region"249
<option>France250
<option>Italy251
</select>252
253
254
255
<select name='company_name' class='filter'>256
<option selected>Please select "Company Name"257
<option>Google258
<option>Yahoo259
</select>260
261
262
<select name='value' class='filter'>263
<option selected>Please select "Value"264
<option>1000000265
<option>2000000266
</select>267
</form>268
<script async defer src='//maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap'></script>269
</body>270
</html>271