Map

import { Loader } from '@googlemaps/js-api-loader';

import Component from '../component/component';

import './map.scss';
import './import/pin.svg';

export interface IMapSettings {
    lat: string;
    lng: string;
}

export default class Map extends Component {
    static initSelector: string = '.map';

    public settings: IMapSettings;
    public googleMap: google.maps.Map;
    public latLng: google.maps.LatLng;
    public marker: google.maps.Marker;

    constructor(target: HTMLElement) {
        super(target);

        this.settings = $.extend({
            lat: null,
            lng: null,
        }, this.element.data());

        if (window.gotoAndPlay.googleMapsApiKey) {
            const loader: Loader = new Loader({
                apiKey: window.gotoAndPlay.googleMapsApiKey,
            });

            loader.load().then((): void => {
                this.latLng = new google.maps.LatLng(parseFloat(this.settings.lat), parseFloat(this.settings.lng));
                this.init();
            });
        } else {
            console.error('No Google Maps API key defined in gotoAndPlay');
        }
    }

    init(): void {
        this.googleMap = new google.maps.Map(this.element[0], {
            center: this.latLng,
            zoom: 14,
        });

        this.marker = new google.maps.Marker({
            icon: {
                scaledSize: new google.maps.Size(32, 32),
                url: window.gotoAndPlay.assetsPath + '/img/pin.svg',
            },
            map: this.googleMap,
            position: this.latLng,
        });
    }
}