Employbl companies map

app.js

window.EventBus = new Vue();

const app = new Vue({
    el: '#app',
    methods: {
        restoreAllCompaniesToMap() {
            EventBus.$emit('restore-all-companies-to-map');
        }
    }
});

CompaniesMap.vue

<template>
    <div id="companies-map-container">
        <div id="companies-map" class="h-500"></div>
    </div>
</template>

<style scoped>
    #companies-map {
        margin: 0 auto;
        background: gray;
    }
</style>

<script>
    let sanfrancisco = [37.782685, -122.411364];

    export default {
        props: {
            'latitude': {
                type: Number,
                default () {
                    return sanfrancisco[0]
                }
            },
            'longitude': {
                type: Number,
                default () {
                    return sanfrancisco[1]
                }
            },
            'zoom': {
                type: Number,
                default () {
                    return 14
                }
            },
            'companies_raw': {
                required: true,
                default () {
                    return [];
                }
            }
        },
        data() {
            let allCompanies = JSON.parse(this.companies_raw);
            return {
                allCompanies,
                companies: allCompanies
            }
        },
        mounted() {
            this.$markers = [];

            // create map
            this.$map = new google.maps.Map(document.getElementById('companies-map'), {
                center: new google.maps.LatLng(this.latitude, this.longitude),
                zoom: this.zoom
            });

            // clear and rebuild markers, making sure companies value is set
            Vue.nextTick().then(() => {
                this.clearMarkers();
                this.buildMarkers(this.allCompanies);
            });
        },
        created() {
            EventBus.$on('restore-all-companies-to-map', () => {
                this.clearMarkers();
                this.buildMarkers(this.allCompanies);

                EventBus.$emit('clear-tags');
            });

            EventBus.$on('display-company', (company) => {
                let latLng = new google.maps.LatLng(company.latitude, company.longitude);
                let marker = this.makeMarker(company);
                let infoWindow = this.makeInfoWindow(company);

                this.clearMarkers();
                this.$markers.push(marker);

                this.$map.setZoom(17);
                this.$map.panTo(latLng);
                infoWindow.open(this.$map, marker);
            });

            EventBus.$on('filters-updated', function(filters) {
                this.processFilters(filters);
            }.bind(this));
        },
        methods: {
            makeMarker(company) {
                return new google.maps.Marker({
                    position: new google.maps.LatLng(company.latitude, company.longitude),
                    icon: null,
                    map: this.$map,
                    title: company.name,
                });
            },
            makeInfoWindow(company) {
                // make infowindow
                let street = (company['street']) ? `${company['street']}, ${company['city']} ${company['zip']}` : "San Francisco, CA";

                let tagString = '';
                company.tags.forEach(function(tag) {
                    tagString += `<span class="badge badge-success">${tag.name.en}</span>`
                });

                // tooltip
                let infoWindowContent = `
					<p style="font-size:24px; font-weight: bold;">
						<a href="/companies/${company['slug']}">${company['name']}</a>
					</p>
					<i>${street}</i>
                    <p>${company['description']}</p>
                    ${tagString}`;

                return new google.maps.InfoWindow({
                    content: infoWindowContent
                });
            },
            clearMarkers() {
                for (let i = 0; i < this.$markers.length; i++) {
                    this.$markers[i].setMap(null);
                }
            },
            clearCompanies() {
                this.companies = [];
            },
            buildMarkers(companies) {
                this.$markers = [];
                for (let i = 0; i < companies.length; i++) {
                    let company = companies[i];
                    let infoWindow = this.makeInfoWindow(company);

                    // make marker
                    let marker = new google.maps.Marker({
                        position: new google.maps.LatLng(company.latitude, company.longitude),
                        icon: null,
                        map: this.$map,
                        title: company.name,
                        infoWindow
                    });

                    // mouseout listener
                    google.maps.event.addListener(marker, 'mouseout', function() {
                        this.infoWindow.close();
                    });

                    // mouseover listener
                    google.maps.event.addListener(marker, 'mouseover', function() {
                        this.infoWindow.open(this.$map, this);
                    });

                    // click listener
                    google.maps.event.addListener(marker, 'click', function() {
                        EventBus.$emit('display-company', company);
                    });

                    this.$markers.push(marker);
                }
            },
            processFilters(filters) {
                this.clearMarkers();
                this.clearCompanies();

                // find companies that have that have matching tag
                let matchingCompanies = [];
                filters.active_tags.forEach((tag) => {
                    this.allCompanies.forEach((company) => {
                        let companyHasTag = _.find(company.tags, (tagForCompany) => {
                            return (tagForCompany.name.en === tag.name.en);
                        });
                        let companyInList = _.find(matchingCompanies, (matchingCompany) => {
                            return (matchingCompany.name === company.name);
                        });

                        if (companyHasTag && !companyInList) {
                            matchingCompanies.push(company);
                        }
                    });
                });

                this.companies = matchingCompanies;
                this.buildMarkers(matchingCompanies);

                EventBus.$emit('companies-updated', matchingCompanies);
            }
        }
    }
</script>

CompaniesTable.vue

<template>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Year Founded</th>
                <th scope="col">Description</th>
                <th scope="col">Website</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(company, index) in companies" @click="showMarker(company)" class="cursor-pointer">
                <th scope="row">
                    <a :href="'/companies/' + company.slug">{{ company.name }}</a>
                </th>
                <td>{{ company.year_founded }}</td>
                <td>{{ company.description }}</td>
                <td>
                    <i class="fas fa-external-link-alt"></i>
                    <a :href="company.website" target="_blank">{{ company.website }}</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script>
    export default {
        props: {
            'companies_raw': {
                required: true,
                default () {
                    return [];
                }
            }
        },
        mounted() {
            EventBus.$on('restore-all-companies-to-map', () => {
                this.companies = this.allCompanies;
            });

            EventBus.$on('companies-updated', (companies) => {
                this.companies = companies;
            });
        },
        data() {
            let allCompanies = JSON.parse(this.companies_raw);
            return {
                allCompanies,
                companies: allCompanies
            }
        },
        methods: {
            showMarker(company) {
                EventBus.$emit('display-company', company);
            },
        }
    }
</script>