Merge pull request #47 from bronthulke/add-business-filter

Add business filtering feature

README.md

@@ -6,4 +6,7 @@ A simple tool, utilising the Google Maps API, to check where your 5km radius ext
 ## Usage
 * `npm start` to run eslint on watch mode and dev-server at localhost:8085.
 * `npm run watch` to only watch for/recompile on changes.
-* `npm run build` to generate a minified, production-ready build.
+* `npm run build` to generate a minified, production-ready build.
+
+## New Feature: Filter Businesses Inside Radius
+This tool now includes a feature to filter and display businesses (such as grocery stores and restaurants) within the specified radius. The businesses are fetched using the Google Places API and displayed on the map with blue markers.

src/maplib.js

@@ -7,6 +7,8 @@ export default class MapLib {
         this.resultMarkers = [];
         this.points = [];
         this.currentPoint = undefined;
+        this.showBusinesses = true;
+        this.businessMarkers = [];
 
         this.map = new google.maps.Map(document.getElementById("map"), {
             center: { lat: -37.8136, lng: 144.9631 },
@@ -61,6 +63,11 @@ export default class MapLib {
             localStorage.removeItem('favouritepoint');
             this.updateFavouritesButtons();
         });
+
+        $("#toggleBusinesses").on("change", (event) => {
+            this.showBusinesses = event.target.checked;
+            this.drawPointsAndRadii();
+        });
     }
 
     addCurrentPointToMap() {
@@ -91,6 +98,9 @@ export default class MapLib {
 
             this.focusMarker(point);
             this.drawSearchRadiusCircle(point);
+            if (this.showBusinesses) {
+                this.fetchBusinesses(point);
+            }
         })
     }
 
@@ -109,6 +119,11 @@ export default class MapLib {
             this.resultMarkers.forEach(m => m.setMap(null));
             this.resultMarkers = [];
         }
+
+        if(this.businessMarkers.length > 0) {
+            this.businessMarkers.forEach(m => m.setMap(null));
+            this.businessMarkers = [];
+        }
     }
 
     drawSearchRadiusCircle(point) {
@@ -126,4 +141,37 @@ export default class MapLib {
         };
         this.resultRadiusCircles.push(new google.maps.Circle(circleOptions));
     }
+
+    fetchBusinesses(point) {
+        const service = new google.maps.places.PlacesService(this.map);
+        const radius = parseInt(document.getElementById("ddlRadius").value);
+        const request = {
+            location: point,
+            radius: radius,
+            type: ['store', 'restaurant']
+        };
+
+        service.nearbySearch(request, (results, status) => {
+            if (status === google.maps.places.PlacesServiceStatus.OK) {
+                results.forEach(business => {
+                    const marker = new google.maps.Marker({
+                        map: this.map,
+                        title: business.name,
+                        position: business.geometry.location,
+                        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
+                    });
+
+                    const infoWindow = new google.maps.InfoWindow({
+                        content: `<div><strong>${business.name}</strong><br>${business.vicinity}</div>`
+                    });
+
+                    marker.addListener('click', () => {
+                        infoWindow.open(this.map, marker);
+                    });
+
+                    this.businessMarkers.push(marker);
+                });
+            }
+        });
+    }
 }

src/views/index.html

@@ -53,6 +53,12 @@ <h2>Quick and dirty radius checker tool!</h2>
                 <a href="javascript:;" class="btn btn-default hidden" id="btnClearFavourite">Clear favourite</a>
             </div>
         </div>
+        <div class="row">
+            <div class="col-xs-12 form-group">
+                <label class="control-label">Toggle Businesses</label>
+                <input type="checkbox" id="toggleBusinesses" checked />
+            </div>
+        </div>
         <div class="row">
             <div class="col-xs-12">
                 <div id="map"></div>
@@ -73,4 +79,4 @@ <h2>Quick and dirty radius checker tool!</h2>
     ></script>
 
 </body>
-</html>
+</html>