react-geosuggest, without adding apikey to index.html

I'd like to use react-geosuggest in my app,

in the readme I see that I must include the Google Maps Places API in the :

<!DOCTYPE html>
  <html>
  <head>
    …
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body>
    …
  </body>
</html>

Which should mean to import it in the index.html file. Is there any ways I could avoid having the apikey in my index.html file?

I tried for example:

import React from "react";
import PropTypes from "prop-types";

import Geosuggest from "react-geosuggest";
import { GOOGLE_MAPS_KEY } from "../../libs/apiKeys";

const LocationPicker = props =>
  <div>
    <script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_KEY}&libraries=places`} />
    <Geosuggest />
  </div>;

LocationPicker.propTypes = {};

export default LocationPicker;

which obviously doesn't work.

Any ideas? thanks

react-geosuggest, without adding apikey to index.html

0 Answers