Home page is not loading Google API anymore

David_Arcos · March 23, 2022, 10:51am

https://traveller-110321.netlify.app/
the home page doesn’t load the Google Map API anymore.
1- It used to automatically display the geolocation where the page was call, now it displays the HTML document but not the map. In order to see the map, you can enter any city in the search input box and will display the location and restaurants.
2- I was with Google for an hour, and they said the problem is in Netlify, somehow is blocking the API from displaying as it used to be.
https://traveller-110321.netlify.app/

tomrutgers · March 23, 2022, 12:48pm

I don’t think this has anything to do with the API being blocked. I don’t see any request errors in the network inspector. There’s a hint of what is going wrong in your console:

Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match.

A quick search brings up a lot of discussion around this topic:

github.com/google-map-react/google-map-react

Warning: Google Maps already loaded outside @googlemaps/js-api-loader.

opened 12:45PM - 29 Mar 21 UTC

marnixhoh

**Describe the bug 🐛** I use `@googlemaps/js-api-loader` explicitly on a page where `google-map-react` is not used. However, when I navigate between this page and one that does use `google-map-react` (or vice-versa) I get the following warning: `Google Maps already loaded outside @googlemaps/js-api-loader. This may result in undesirable behavior as options and script parameters may not match.` I noticed that I can easily prevent this warning from showing by conditionally loading Google Maps on the page that explicitly uses `@googlemaps/js-api-loader` by checking to see if `window.google` exists or not (see minimal reproducible example below). However, I couldn't find a way to do something similar with `google-map-react`? Any help or suggestions would be greatly appreciated! **To Reproduce 🔍** Minimal reproducible example: File A.js (conditionally uses `@googlemaps/js-api-loader`): ``` import React, { useState, useEffect } from 'react' import { Loader } from '@googlemaps/js-api-loader' import Link from 'components/elements/Link' const A = () => { const [isMapApiLoaded, setIsMapApiLoaded] = useState(false) useEffect(() => { if (isMapApiLoaded || window.google) return const loader = new Loader({ apiKey: process.env.API_KEY, libraries: ['places'] }) loader.load().then(() => setIsMapApiLoaded(true)) }, [isMapApiLoaded]) return ( <div> <h1>A</h1> <Link href="/b">b</Link> </div> ) } export default A ``` File B.js (uses `google-map-react`) ``` import React from 'react' import GoogleMapReact from 'google-map-react' import Link from 'components/elements/Link' const B = () => { const apiHasLoaded = (map, maps) => { console.log('Loaded!') } return ( <div> <GoogleMapReact defaultZoom={10} bootstrapURLKeys={{ key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY, libraries: ['places'] }} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)} options={() => ({ fullscreenControl: false })} ></GoogleMapReact> <Link href="/a">a</Link> </div> ) } export default B ``` **Environment:** - OS: mac - Browser: chrome - Version; @googlemaps/js-api-loader: 1.11.1, google-map-react: 2.1.9

David_Arcos · March 23, 2022, 4:48pm

Thanks, Tom! I’ll look into it again, I solved that problem before, and it’s repeating itself. David