Only populate courts in viewing area

[chrisdesilva]

Currently, every court that is in the database gets displayed. You can see this by going to the courts page and zooming out on the map. Similar to results on Google Maps, courts should only show within viewing area with option to search again in another part of the map.

[ohepworthbell]

In terms of just rendering the relevant data, that is relatively simple with Google Maps using something like (untested):

let CourtsFiltered = Courts.filter(marker =>
    map.getBounds().contains(new google.maps.LatLng(doc.data().latitude, doc.data().longitude))
);

I am not overly familiar with React, so might be worth leaving this for someone else more familiar. Heads up for anyone else looking to tackle this though