Add marker filter to Google Map

Job ID: 33899102

Budget: £10 – £35 GBP

I have a custom google map that has been created using the API. The map contains a collection of markers which are plotted using the dataset. Each point / marker on the map has a category.

Eg sample of data:

var data = [{
"id": 1,
"lat": 53.517332,
"lng": -2.471296,
"Category": 1,
"Icon": "https://i.imgur.com/yBlu6K0.png"
},
{
"id": 2,
"lat": 53.517341,
"lng": -2.470937,
"Category": 2,
"Icon": "https://i.imgur.com/yBlu6K0.png"
},
{
"id": 3,
"lat": 53.517344,
"lng": -2.470599,
"Category": 1,
"Icon": "https://i.imgur.com/yBlu6K0.png"
},
{
"id": 4,
"lat": 53.517344,
"lng": -2.470068,
"Category": 0,
"Icon": ""
}.......

I have added a simple toggle to the top of my map which shows the options. "Delivered", "Left" or "Returned".

I would like this toggle to filter the markers in my map. The categories within the data (eg category = 1, 2 or 3) determine the status. So when "Delivered" is selection this should show all the markers that have category = 1. Likewise, 'left' = category 2 and 'Return' = category 3.

The behaviour of the toggle should be as follows:

- By default nothing is selected, and this shows all markers on the map
- Only 1 checkbox can be selected at a time.
- When clicking another checkbox, the filter is updated
- When clicking the same checkbox it removes the filter

Here is an example of the toggle I need: https://jsfiddle.net/geocodezip/aytgb1Lh/
Related categories: JavaScript Google Maps API