[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 Githubissues.

Githubissues is a development platform for aggregating issues.