sitecore-search-with-google-map/dist/helpers/GoogleMap.js

A library for seamless integration of Sitecore Search with Google Maps in Next.js applications, enabling location-based searches with flexible UI options.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { GoogleMap as GoogleMaps, Marker } from "@react-google-maps/api";
var GoogleMap = function (_a) {
    var coordinates = _a.coordinates, storeCoordinates = _a.storeCoordinates, setActiveMarker = _a.setActiveMarker, activeMarker = _a.activeMarker, mapStyles = _a.mapStyles, mapIcon = _a.mapIcon;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    var _b = useState([]), markers = _b[0], setMarkers = _b[1];
    var _c = useState([]), marker = _c[0], setMarker = _c[1];
    var directionsRenderer = useRef(null);
    var directionsService = useRef(null);
    useEffect(function () {
        directionsRenderer.current = new window.google.maps.DirectionsRenderer();
        directionsService.current = new window.google.maps.DirectionsService();
    }, []);
    {
    }
    useEffect(function () {
        setMarkers(storeCoordinates === null || storeCoordinates === void 0 ? void 0 : storeCoordinates.map(function (store, index) {
            return {
                id: store === null || store === void 0 ? void 0 : store.id,
                position: { lat: store.latitude, lng: store.longitude },
                onClick: function () { return handleMarkerClick(store); },
                label: "".concat(index + 1),
                icon: {
                    url: mapIcon || "https://img.icons8.com/?size=512&id=63257&format=png",
                    scaledSize: new window.google.maps.Size(40, 40),
                    anchor: new window.google.maps.Point(40, 40),
                },
                animation: activeMarker &&
                    (activeMarker === null || activeMarker === void 0 ? void 0 : activeMarker.id) == (store === null || store === void 0 ? void 0 : store.id) &&
                    window.google.maps.Animation.BOUNCE,
            };
        }));
    }, [storeCoordinates]);
    useEffect(function () {
        setMarker([coordinates].map(function (store) { return ({
            id: 0,
            position: { lat: store.lat, lng: store.lng },
        }); }));
    }, [coordinates]);
    var handleMarkerClick = function (store) {
        setActiveMarker(store);
        var element = document.getElementById("google_map_store_".concat(store === null || store === void 0 ? void 0 : store.id));
        if (element) {
            var scrollStartTime_1 = performance.now();
            window.scrollTo({
                top: element.offsetTop,
                behavior: "smooth",
            });
            element.setAttribute("tabindex", "-1");
            var focusAfterScroll_1 = function () {
                var scrollEndTime = performance.now();
                var scrollDuration = scrollEndTime - scrollStartTime_1;
                var focusDelay = Math.max(0, 1000 - scrollDuration);
                setTimeout(function () {
                    element.focus();
                }, focusDelay - 300);
                window.removeEventListener("scroll", focusAfterScroll_1);
            };
            window.addEventListener("scroll", focusAfterScroll_1);
        }
    };
    return (_jsx("div", { style: { padding: "55px 10px 20px 0" }, children: _jsx("div", { id: "google-map", children: _jsxs(GoogleMaps, { mapContainerStyle: mapStyles, center: coordinates, zoom: 9, onLoad: function (map) {
                    window.googleMap = map;
                }, children: [markers === null || markers === void 0 ? void 0 : markers.map(function (marker) { return (_jsx(Marker, __assign({ position: marker.position, onClick: marker.onClick, label: {
                            color: "white",
                            fontSize: "16px",
                            className: "",
                            text: marker.label,
                        }, icon: marker.icon }, (activeMarker &&
                        (activeMarker === null || activeMarker === void 0 ? void 0 : activeMarker.id) === (marker === null || marker === void 0 ? void 0 : marker.id) && {
                        animation: window.google.maps.Animation.BOUNCE,
                    })), marker.id)); }), marker === null || marker === void 0 ? void 0 : marker.map(function () { return (_jsx(_Fragment, {})); }), _jsx(Marker, { position: { lat: coordinates.lat, lng: coordinates.lng } })] }) }) }));
};
export default GoogleMap;