Added functions to display signal on the map

src/components/GoogleMap.vue

@@ -41,13 +41,11 @@ export default {
     toggleHeatmap() {
       this.heatmap.setMap(this.heatmap.getMap() ? null : this.map)
     },
-
     // Centers the map on user position when the button is presed
     centerMap() {
       this.map.setCenter(new google.maps.LatLng(this.center.lat, this.center.lng))
       this.map.setZoom(15)
     },
-
     /*********************
       APIs IMPLEMENTATION
     **********************/
@@ -149,8 +147,34 @@ export default {
         map: map
       })
 
-      // Add marker for every nightlife establishment along with an info window
+      // Wait for google Places API to be finished fetching relevant data
       await this.findPlaces()
+      // Initialize all relevant places on map
+      this.initializePlaces(map)
+      // Initialize all relevant signals on the map
+      this.initializeSignals(map)
+
+      // Create a heatmap based on crimes location
+      await this.getCrimeData()
+      this.crimes.forEach(crime => {
+        const lat = crime.location.latitude
+        const lng = crime.location.longitude
+
+        heatmapData.push(new google.maps.LatLng(lat, lng))
+      })
+
+      var heatmap = new google.maps.visualization.HeatmapLayer({
+        data: heatmapData
+      })
+      heatmap.set('radius', heatmap.get('radius') ? null : 80)
+      heatmap.set('opacity', heatmap.get('opacity') ? null : 0.3)
+
+      // Save heatmap and map instance for use in toggleHeatmap()
+      this.heatmap = heatmap
+      this.map = map
+    },
+    // Creates markers and infoWindows for every relevant nightlife establishment in the area
+    initializePlaces(map) {
       this.places.forEach(place => {
         const lat = place.geometry.location.lat
         const lng = place.geometry.location.lng
@@ -170,29 +194,31 @@ export default {
           infoWindow.open(map, marker)
         })
       })
+    },
+    // Creates markers and infoWindows for every signal in the area
+    initializeSignals(map) {
+      var infoWindow = new google.maps.InfoWindow()
 
-      // Create a heatmap based on crimes location
-      await this.getCrimeData()
-      this.crimes.forEach(crime => {
-        const lat = crime.location.latitude
-        const lng = crime.location.longitude
-
-        heatmapData.push(new google.maps.LatLng(lat, lng))
-      })
+      for (const signalId in this.signals) {
+        let signal = this.signals[signalId]
 
-      var heatmap = new google.maps.visualization.HeatmapLayer({
-        data: heatmapData
-      })
-      heatmap.set('radius', heatmap.get('radius') ? null : 80)
-      heatmap.set('opacity', heatmap.get('opacity') ? null : 0.3)
+        let marker = new google.maps.Marker({
+          position: new google.maps.LatLng(signal.lat, signal.lng),
+          map: map,
+          icon: this.getSignalIcon(signal.type)
+        })
 
-      // Save heatmap and map instance for use in toggleHeatmap()
-      this.heatmap = heatmap
-      this.map = map
+        google.maps.event.addListener(marker, 'click', () => {
+          infoWindow.setContent(
+            `<p class="text-subtitle1" style="margin-bottom:8px;">${signal.type}</p>
+            <p class="text-weight-light">${signal.details}</p>`
+          )
+          infoWindow.open(map, marker)
+        })
+      }
     },
-
     /*********************
-      GET PLACE'S DETAILS
+      GET PLACES DETAILS
     **********************/
     // Return html element, either Open or closed
     isPlaceOpen(place) {
@@ -225,11 +251,29 @@ export default {
         icon = 'https://img.icons8.com/color/40/000000/food-and-wine.png'
       }
       return icon
+    },
+    /*********************
+      GET SIGNAL ICON
+    **********************/
+    getSignalIcon(signalType) {
+      switch (signalType) {
+        case 'Danger':
+          return 'https://img.icons8.com/color/50/000000/error--v1.png'
+        case 'Emergency':
+          return 'https://img.icons8.com/color/50/000000/ambulance.png'
+        case 'Fight Breakout':
+          return 'https://img.icons8.com/color/50/000000/judo.png'
+        case 'Free Drinks':
+          return 'https://img.icons8.com/color/50/000000/dizzy-person.png'
+        case 'Car Rental':
+          return 'https://img.icons8.com/color/50/000000/car-rental.png'
+      }
     }
   },
 
   computed: {
-    ...mapState(['mapStyles'])
+    ...mapState(['mapStyles']),
+    ...mapState('firebase', ['signals'])
   },
 
   async mounted() {