# Google Map Places Autocomplete with Next.js Google APIs documents are annoying to read, and they lack support for popular frameworks such as React and Next.js. In this article I’ll show you how I implemented lazy loading the API the simplest way possible. I have made my own custom react hook for checking whether Google Map API script needs to be loaded or not. `./hooks/use-google-map-api.tsx` ```typescript 'use client'; import * as React from 'react'; interface State { needGoogleMapApi: boolean; isReady: boolean; } const listeners: Array<(state: State) => void> = []; let memoryState: State = { needGoogleMapApi: false, isReady: false }; let firstTime = true; function dispatch(updates: Partial) { memoryState = { ...memoryState, ...updates }; listeners.forEach((listener) => { listener(memoryState); }); } export function useGoogleMapApi(autoLoad: boolean = false) { const [state, setState] = React.useState(() => { // Synchronously set needGoogleMapApi if autoLoad is true (genius) if (autoLoad && !memoryState.needGoogleMapApi) { memoryState.needGoogleMapApi = true; } return memoryState; }); React.useEffect(() => { listeners.push(setState); if ((autoLoad && !memoryState.needGoogleMapApi) || firstTime) { dispatch({ needGoogleMapApi: true }); firstTime = false; } return () => { const index = listeners.indexOf(setState); if (index > -1) { listeners.splice(index, 1); } }; }, [autoLoad]); const loadGoogleMap = React.useCallback(() => { if (!memoryState.needGoogleMapApi) { dispatch({ needGoogleMapApi: true }); } return state; }, [state]); const onReady = React.useCallback(() => { dispatch({ isReady: true }); }, []); return { ...state, loadGoogleMap, onReady, }; } ``` The component that is responsible for loading the Google Script tag `./components/google-map-api.tsx` ```typescript 'use client'; import { useGoogleMapApi } from '@/hooks/use-google-map-api'; import Script from 'next/script'; export function GoogleMapApi() { const { needGoogleMapApi, onReady } = useGoogleMapApi(); if (!needGoogleMapApi) return null; // Load Google Places API return (