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

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

[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 <script/> tag for Google Maps JavaScript API v3 in your HTML’s <head/> element”

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