google-maps-optimizations

MapsStaticApiExample.tsx

export default function MapsStaticApiExample({
  markers,
  height,
  width,
  center,
  zoom,
}: Props) {
  return (
    <img
      alt="Map Preview"
      style={{
        objectFit: "cover",
        objectPosition: "50% 50%",
        position: "absolute",
        ...
      }}
      src={`https://maps.googleapis.com/maps/api/staticmap?${queryString.stringify(
        {
          center: `${center.lat},${center.lng}`,
          zoom,
          size: `${width}x${height}`,
          key: process.env.REACT_APP_MAPS_KEY!,
          scale: 2,
          format: "jpg",
          markers: `color:red|size:mid|${markers
            .map((m) => `${m.lat},${m.lng}`)
            .join("|")}`,
        }
      )}`}
    />
  );
}

ObserverExample.tsx

const useObserveVisibility = (element: Element | null): boolean => {
  const [visible, setVisible] = useState<boolean>(false);
  console.log(element);
  useEffect(() => {
    if (!element) return;

    const observer = new IntersectionObserver(
      (changes) => {
        changes.forEach((change) => {
          if (change.isIntersecting) {
            setVisible(true);
          }
        });
      },
      {
        root: null, // relative to document viewport
        rootMargin: "0px", // margin around root
        threshold: 0, // visible amount of item shown in relation to root
      }
    );
    observer.observe(element);
    return () => {
      observer.disconnect();
    };
  }, [element]);
  return visible;
};

function ObserverExample() {
  const [mapNode, mapRef] = useRefWithCallback();
  const showMap = useObserveVisibility(mapNode);
  return (
    <div>
      <div style={{ height: 1000, backgroundColor: "blue" }} />
      <div ref={mapRef} style={{ height: MAP_HEIGHT }}>
        {showMap && <SomeMap />}
      </div>
    </div>
  );
}

PlaceholderExample.tsx

function PlaceholderMapPage() {
  const [useDynamicMap, setUseDynamicMap] = useState<boolean>(false);
  const staticMap = (
    <div
      onClick={() => setUseDynamicMap(true)}
      style={{
        height: MAP_HEIGHT,
        width: WIDTH,
        cursor: "pointer",
        position: "relative",
      }}
    >
      <StaticImageMapImage
        markers={MARKERS}
        center={CENTER}
        height={MAP_HEIGHT}
        width={WIDTH}
        zoom={10}
      />
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            backgroundColor: "black",
            opacity: 0.3,
            height: "100%",
            width: "100%",
          }}
        />
        {!useDynamicMap && (
          <button
            style={{ position: "absolute", padding: 20 }}
            onClick={() => setUseDynamicMap(true)}
          >
            Browse Map
          </button>
        )}
      </div>
    </div>
  );

  if (!useDynamicMap) return staticMap;

  return (
    <div style={{ height: MAP_HEIGHT, width: WIDTH, position: "relative" }}>
      <SomeMap loadingElement={staticMap} />
    </div>
  );
}

SkipFontExample.tsx

// font URL looks something like https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2

const usePreventGoogleFontLoad = () => {
  useEffect(() => {
    const head = document.getElementsByTagName("head")[0] as HTMLHeadElement;

    // Save the original insertBefore function
    const insertBefore = head.insertBefore;

    // Replace insertBefore with a function that's going
    // to see what's inserted and skip if it's the designated font
    head.insertBefore = function insertBeforeNew<T extends Node>(
      newElement: T,
      referenceElement: Node
    ): T {
      if (
        (newElement as any).href &&
        (newElement as any).href.indexOf(
          "//fonts.googleapis.com/css?family=Roboto"
        ) > -1
      ) {
        // eslint-disable-next-line no-console
        console.info("Font loading is skipped");
        return newElement;
      }

      insertBefore.call(head, newElement, referenceElement);
      return newElement;
    };
    return () => {
      // restore original
      head.insertBefore = insertBefore;
    };
  }, []);
};

function SkipFontExample() {
  usePreventGoogleFontLoad();
  return (
    <div>
      <SomeMap />
    </div>
  );
}