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

[zomars]

I'm using a basic example and the script is added each time, I don't know if this is the intended behaviour or am I missing something.

This is my component:

import React from "react"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const Map =  withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={17}
    defaultCenter={{lat: 24.828797, lng: -107.441531}}
    center={props.location}
    defaultOptions={{ disableDefaultUI: true, gestureHandling: 'none' }}
  >
    {props.isMarkerShown && <Marker position={props.location} />}
  </GoogleMap>
))

export default Map

[ping4tucker]

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

[kettanaito]

I'm experiencing the same issue, but I don't include Google Map anywhere except of the component. The layout is the same as the author of issue.

[ping4tucker]

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.

[kettanaito]

@ping4tucker when I remove withScripts it throws an error saying "you must include withScripts" high-order component...

[tuccle22]

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?

[dave4jr]

@zomars Can you add the part of your code where you are calling the component? I was getting this issue when I was adding the library separately with a script tag with async and callback init funciton. As soon as I removed that, it went away.

[zomars]

This is how I'm calling the Map component:

<Map
  isMarkerShown
  googleMapURL=`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${API_KEY}`
  loadingElement={<CustomIndicator />}
  containerElement={<div style={{ height: `100%` }} />}
  mapElement={<div style={{ height: `100%` }} />}
  location={locationData}
/>

And this is my Map component:

import React from "react"
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const Map = withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={17}
    defaultCenter={{lat: 24.828797, lng: -107.441531}}
    center={props.location}
    defaultOptions={{ disableDefaultUI: true, gestureHandling: 'none' }}
  >
    {props.isMarkerShown && <Marker position={props.location} />}
  </GoogleMap>
)

export default Map

[zomars]

This happens on every component remount

[kettanaito]

This is how I've encountered the same issue: https://github.com/kettanaito/react-advanced-form/blob/ca6be457cdd42b05cfc05595ce9d2409dab4a853/examples/third-party/react-google-maps/Map.jsx

It's a general Map component which I later reuse anywhere I want. Using it at one place only resulted into "duplicate API key" and sometimes into "inactive API".

[ermik]

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);

[strarsis]

I get the same error and I want to use google-map-react and react-streetview at the same time. Currently only one component loads correctly when both are used at the same time.

[ermik]

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

[strarsis]

@ermik: Could you give me an example.

[ermik]

@strarsis I will get back to my code soon and post something here. Sorry for not being able to help quicker.

[hamaron]

@Sorcer23 was correct in my case. I had 2 components that included the same link, but actually one of them had an extra space at the end of the link although the links looked identical, which caused the issue.

[tmartin2089]

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

[tuanluu-agilityio]

The same issue :( Have anyone here can help to resolve this warning???

[karkb]

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 tag for Google Maps JavaScript API v3 in your HTML's

element"

[JustFly1984]

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.

[SyedSaifAli]

Any solution found for the above issue?

[JustFly1984]

@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.

[churrinfunflais]

Have you tried to use the same libraries on the googleMapURL??, having different url caused this issue for me... i.e.

View 1 :

<MyMapComponent
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{height: `100%`}}/>}
        containerElement={<div style={{height: `100%`}}/>}
        mapElement={<div style={{height: `100%`}}/>}
 />

View 2 :

<MyMapComponent
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&v=3.exp&libraries=geometry"
        loadingElement={<div style={{height: `100%`}}/>}
        containerElement={<div style={{height: `100%`}}/>}
        mapElement={<div style={{height: `100%`}}/>}
 />

When the view changed the error popped up in the console...

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

[prathibhaaa]

basic root file of my application calling google map api in the script tag already. if i add this react-google-maps only for some special components this also throws the error

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

[JustFly1984]

@prathibhaaa try @react-google-maps/api - you can have single script for a page, but you can have multiple maps per script.

[kishore0207]

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.

[JustFly1984]

@kishore0207 This is due to google-maps-api has never been architectured for SPA. This is a bug in google's code. Currently there is no possibility to fix it. The only hacky way to get rid of this message is to remove a version property from window.google object before mounting <script> to the DOM for second time, but still that could lead to memory leaks.

[AlexOros]

@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.

Hello I am using @react-google-maps/api an I ran in the following problem: I have multiple map instances on multiple pages (works well, no more "included multiple times" errors ) and when I unmounted the first map instance the InfoWindow component (for which I have overwritten some styles) is back to default CSS settings. The overwritten CSS classes don't apply anymore. Here is an example of the CSS classes I overwrite:

.gm-style .gm-style-iw-c {
  max-width: 96% !important
  width: 300px !important

  .gm-ui-hover-effect {
    font-size: 30px !important 
    top: -2px !important
    right: 6px !important
    img {
      height: 25px !important
      width: 22px !important
    }
  }
  .gm-style-iw-d {
    max-width: 96% !important
    width: 300px !important
  }
}

I think it has something to do with "cleaninig up window.google object on Unmount" but I might be wrong

[digholesnehal]

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.

Thanks for the solution, it did work for me.

[JustFly1984]

@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!

[miltonrincon]

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.

Thanks it works for me

[JustFly1984]

The repo of this project is unmaintained more than 3 years, 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 Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

[w3bpro]

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

[fdeliu]

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