Lighthouse score falls down after adding the library to a page, Infowindow doesn't show popups

[multipliedtwice]

Hello, thank you for a nice library, really convenient API. I try to use this library with the next.js project. I have two issues with it.

1. When I turn off the component that uses this library Lighthouse score is higher by ~30 points. Am I doing something wrong?
2. Infowindow doesn't show any popups on click.

The component looks like this:

import React, { useEffect, useRef, useState } from 'react'
import Head from 'next/head'
import { Loader } from '@googlemaps/js-api-loader'
import { MarkerLifestyle, Tabs } from '~components'
import { PropertyType } from '~types'

let map: google.maps.Map
let service: google.maps.places.PlacesService
let infowindow: google.maps.InfoWindow

export const Neighborhood = ({ property }: { property: PropertyType | null }) => {
  const [currentTab, setCurrentTab] = useState(tabs[0])
  const googlemap = useRef(null)

  useEffect(() => {
    const loader = new Loader({
      apiKey: '123456789',
      version: 'weekly',
    })

    loader.load().then(() => {
      // @ts-ignore
      map = new google.maps.Map(googlemap.current, {
        center: currentTab.coordinates,
        zoom: 15,
      })
      infowindow = new google.maps.InfoWindow({ content: 'test' })
      currentTab.markers?.forEach(createMarker)
    })
  })

  function createMarker(place: any) {
    const marker = new google.maps.Marker({
      map,
      position: place.location,
      title: place.name,
      animation: google.maps.Animation.DROP,
      icon: '/svg/marker.svg',
    })


    google.maps.event.addListener(marker, 'click', () => {
      setTimeout(() => {
        infowindow.open({ map, shouldFocus: true })
        infowindow.setContent(place.name || 'asdfsdfsdfd')
      }, 200)
  }

  return (
    <section className="mt-11 border-b-1 border-gray-100">
      <span className="pretitle">Inside the neighborhood</span>
      <h2 className="heading2">
        Conveniently located right next to Transport, Schools and Shopping Malls
      </h2>
      <div>
        <section className="relative">
          <Tabs
            tabs={tabs}
            tab="min-w-64 flex items-center justify-center animated py-2 p-3 rounded-50 mb-8"
            tabInactive="tab-inactive hover:border-blue-800 cursor-pointer transition"
            tabActive="tab-active cursor-default bg-blue-100 border-P100 border"
            setTabCallback={(newTab: any) => {
              const newActiveTabIdx = tabs.findIndex((tab) => tab.name === newTab)
              if (newActiveTabIdx === -1) return
              setCurrentTab(tabs[newActiveTabIdx])
              map?.setCenter(tabs[newActiveTabIdx].coordinates)
            }}
          >
            <></>
            <></>
            <></>
          </Tabs>
          <div className="w-full h-109 mb-8 rounded-10" id="map" ref={googlemap} />

          <div className="grid grid-cols-1 md:grid-cols-2 mb-14">
            {currentTab.markers?.map((marker) => {
              return (
                <span key={marker.name} className="flex items-center my-3">
                  <span className="mr-2">
                    <MarkerLifestyle />
                  </span>
                  <span className="flex flex-col">
                    <strong>{marker.name}</strong>
                    <span className="flex items-center">
                      <span>{marker.distance.meters} m</span>
                      <span>{marker.distance.minutes} minutes walk</span>
                    </span>
                  </span>
                </span>
              )
            })}
          </div>
        </section>
      </div>
    </section>
  )
}

Could you please help me out how to solve this 2 issues?

[jpoehnelt]

1. When I turn off the component that uses this library Lighthouse score is higher by ~30 points. Am I doing something wrong?

I imagine this is because it is seeing the layout shift on the map getting loaded and counting that as the first full paint. This blog seems to have some good suggestions: https://www.corewebvitals.io/pagespeed/google-maps-100-percent-pagespeed. Please comment back here what works for you or if you have any additional questions such as switching between static and dynamic maps on user interaction.

2. Infowindow doesn't show any popups on click.

google.maps.event.addListener(marker, 'click', () => {
      setTimeout(() => {
        infowindow.open({
          anchor: marker, // <----- need to set the anchor for the infowindow
          map, 
          shouldFocus: true 
        })
        infowindow.setContent(place.name || 'asdfsdfsdfd')
      }, 200)

[multipliedtwice]

@jpoehnelt worked out very nicely, thank you very much