react-google-maps: [BUG] You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

If you are having a script for google maps in your html element, then removing withScriptjs will solve the issue.

from Step 3: “If you don’t use withScriptjs, you have to put a <script/> tag for Google Maps JavaScript API v3 in your HTML’s <head/> element”

This can be solved by separating the compose() call that creates the render environment and the layout functional component like so:

const API_KEY = "aHR0cHM6Ly95b3V0dS5iZS9kUXc0dzlXZ1hjUQ=="

const mapEnvironment = compose(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap
);

const MapLayout = props => (
  <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
    {props.isMarkerShown && (
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
    )}
  </GoogleMap>
);

const MapComponent = mapEnvironment(MapLayout);

I was getting this error when I was also adding the google maps library in the head of my html.

If the error is real and not a bug, you could try removing the withScriptjs higher order component and see if the map still shows up.

Have same problem with new version (@react-google-maps/api). What I found when I was trying to reload api scripts (as user language changed)was that I had to add window.google = undefined (after removing script tags from document), but before load them again

This happens on every component remount

@ping4tucker when I remove withScripts it throws an error saying “you must include withScripts” high-order component…

@digholesnehal The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

In my react app I use multiple map instances for some of the pages, but for others I do not. I do not want to put script in head, cos it will impact first load experience worse for everybody.

I managed to solve this by rendering the google map with a bit of delay

In my Angular app, I used Google map api, when am entering the input filed throws this below error

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

@SyedSaifAli We’ve managed to solve this issue by cleaninig up window.google object on Unmount in @react-google-maps/api library: https://www.npmjs.com/package/@react-google-maps/api

There is no possible solution for the current lib, cos it is unmaintained more than a year.

If you’re using a pre-render you might run into this when hydration occurs.

@strarsis try moving the script loader into a separate environment and override both modules so that only your code injects the script.

I tried to recreate this error with create-react-app, but wasn’t able to reproduce the issue.
https://github.com/tuccle22/google-maps-example/blob/master/src/App.js

Anyone have a repo that shows the issue?