-3

I'm trying to draw a path using react-google-maps. I can display the map no problem, but when I add the polyline component the map acts as if i've hit the quota. I haven't come close to the quota.

Yes, this question has been asked before. No, enabling billing is not a solution to this issue.

Here is the relevant code:

Works as intended(no polyplot):

<div classname="Maps" style={{ height: '55vh', width: '44.3%', float:  'right'}}>

      <GoogleMapReact
        defaultCenter={center}
        defaultZoom={zoom}
        bootstrapURLKeys={{ key:'MY_API_KEY'}}


      </GoogleMapReact>
    </div>

Throws an error: 

<div classname="Maps" style={{ height: '55vh', width: '44.3%', float: 'right'}}>

      <GoogleMapReact
        defaultCenter={center}
        defaultZoom={zoom}
        bootstrapURLKeys={{ key:'MY_API_KEY'}}

      >
        <Polyline 
          path={path} 
          options={{ 
            strokeColor: '#00ffff',
            strokeOpacity: 1,
            strokeWeight: 2,
            icons: [{ 
              icon: "hello",
              offset: '0',
              repeat: '10px'
            }],
          }}
        />

      </GoogleMapReact>
    </div>

The error shown in console is: "You have exceeded your request quota for this API. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors"

gibford
  • 1
  • 3

1 Answers1

-1

Solution: Use react-leaflet instead.

Seems I should have followed this advice if I really wanted help: https://meta.wikimedia.org/wiki/Cunningham%27s_Law

gibford
  • 1
  • 3