Nsryjdtyk

class GoogleMap extends React.Component {

  componentDidMount() {

    if (!window.google || !window.google.maps) {

      const { googleKey } = this.props;

      // require is not working inside stackoverflow snippets

      // we are using a cdn for scriptjs, you can use npm

      //const $script = require(`scriptjs`);

      $script(

        `https://maps.googleapis.com/maps/api/js?key=${googleKey}`,

        this.handleGoogleLoad

      );

    }

  }



  componentDidUpdate(prevProps) {

    const { position } = this.props;

    if (prevProps.position !== position) {

      this.map && this.map.setCenter(position);

      this.marker && this.marker.setPosition(position);

    }

  }



  handleGoogleLoad = () => {

    const { position } = this.props;

    this.map = new window.google.maps.Map(this.mapRef, {

      scaleControl: true,

      center: null,

      zoom: 10

    });

    this.marker = new window.google.maps.Marker({

      map: this.map,

      position: position

    });



    this.map.setCenter(position);

    this.marker.setPosition(position);

  };



  render() {

    return <div style={{ height: "350px" }} ref={ref => (this.mapRef = ref)} />;

  }

}



class App extends React.Component {

  state = { lat: 40.741895, lng: -73.989308, googleKey: "" };



  onInputChange = ({ target }) => {

    this.setState({ [target.name]: target.value });

  };



  render() {

    const { lat, lng, googleKey } = this.state;

    const position = { lat: Number(lat), lng: Number(lng) };

    return (

      <div className="App">

        <div>

          <label>Paste google key </label>

          <input

            name="googleKey"

            value={googleKey}

            onChange={this.onInputChange}

          />

          <hr />

          <div>Change coords</div>

          <input name="lat" value={lat} onChange={this.onInputChange} />

          <input name="lng" value={lng} onChange={this.onInputChange} />

        </div>

        <hr />

        {googleKey ? (

          <GoogleMap position={position} googleKey={googleKey} />

        ) : (

          <div>Missing google key</div>

        )}

      </div>

    );

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/script.js/2.5.9/script.min.js"></script>

<div id="root"/>