Google Map

import addToDataLayer from '../../../../js/utils/datalayer';

const GoogleMapsLoader = require('google-maps');

GoogleMapsLoader.KEY = 'AIzaSyAdW2WAl_77JxakOBYcIQt_5A28sUJIdro';
GoogleMapsLoader.VERSION = '3.37';

export class Map {
    constructor(container) {
        this.container = container;
        this.init();
    }

    init() {
        GoogleMapsLoader.load((google) => {
            const googleMaps = google.maps;
            const allMarkers = [];
            let activeInfoWindow;
            const conf = {
                zoom: 7,
                maxZoom: 18,
                center: new googleMaps.LatLng(19.294047, -81.282721),
            };

            const map = new googleMaps.Map(this.container.querySelector('.js-map'), conf);

            let orderOfDisplay = 1;

            this.container.querySelectorAll('.js-map-item').forEach((item) => {
                const currentLong = Number.parseFloat(item.querySelector('.js-map-item-longitude').innerHTML);
                const currentLat = Number.parseFloat(item.querySelector('.js-map-item-latitude').innerHTML);
                const latlng = { lat: currentLat, lng: currentLong };

                const marker = new window.google.maps.Marker({
                    position: latlng,
                    map,
                    icon: this.container.dataset.markerIcon,
                    order: orderOfDisplay,
                });

                item.setAttribute('pin-order', orderOfDisplay);
                const title = item.querySelector('.js-map-item-title').innerHTML;
                const description = item.querySelector('.js-map-item-description').innerHTML;

                if (title || description) {
                    // Only show the map marker window if there is a title or description
                    const infoWindowContent = `<div class="map-pin__infobox"><h2 class="map-pin__title">${title}</h2><div class="map-pin__description">${description}</div></div>`;

                    const infowindow = new window.google.maps.InfoWindow({
                        content: infoWindowContent,
                    });

                    window.google.maps.event.addListener(marker, 'click', () => {
                        if (activeInfoWindow) {
                            activeInfoWindow.close();
                        }

                        infowindow.open(map, marker);

                        activeInfoWindow = infowindow;

                        this.container.querySelectorAll('.js-map-item').forEach((div) => {
                            div.classList.remove('show');
                        });

                        const infoBoxToShow = this.container.querySelector(`[pin-order='${marker.order}']`);
                        infoBoxToShow.classList.add('show');
                        Map.trackClick(infoBoxToShow.querySelector('.js-map-item-title'));
                    });
                }

                allMarkers.push(marker);
                orderOfDisplay++;
            });

            const bounds = new window.google.maps.LatLngBounds();
            for (let i = 0; i < allMarkers.length; i++) {
                bounds.extend(allMarkers[i].getPosition());
            }

            map.fitBounds(bounds);

            let zoomed = false;

            // enforce zoom levels within configuration
            map.addListener('idle', () => {
                if (!zoomed) {
                    if (map.getZoom() > conf.maxZoom) map.setZoom(conf.maxZoom);
                    if (map.getZoom() < conf.zoom) map.setZoom(conf.zoom);

                    zoomed = true;
                }
            });
        });
    }

    static trackClick(title) {
        addToDataLayer({
            'event': 'link.click',
            'linkName': unescape(title.innerText).trim(),
            'linkType': 'map',
        });
    }
}

export default (module) => new Map(module);