jmmarco · April 15, 2018 16:08
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>React with Google Maps API</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
  <style>
    body {
      font-family: sans-serif;
    }

    #map {
      height: 600px;
    }

    a {
      text-decoration: none;
    }
  </style>
 </head>
 <body>
  <div id='app'></div>

  <script type="text/babel">

    class App extends React.Component {
      constructor(props) {
        super(props)

        this.state = {
          city: 'Buenos Aires'
        }
      }

      selectCity = e => {
        const newValue = e.target.value
        this.setState({
          city: newValue
        })
      }
   
      render() {
        const { city } = this.state

        const imgUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=14&size=600x600`
        return (
          <div>
            <h1>Simple Google Maps Example using React</h1>
            <div id="map">  
              <img src={imgUrl} alt={city} />
            </div>
            <div>
              <span>Current State: {JSON.stringify(this.state)}</span>
            </div>
            <button value="New York" onClick={this.selectCity}>New York</button>
            <button value="Buenos Aires" onClick={this.selectCity}>Buenos Aires</button>
            <footer>
              <p>This example was created using the <a href="https://developers.google.com/maps/documentation/static-maps/intro#top_of_page">Google Maps Static API</a></p>
            </footer>
          </div>
        )
      }

    } // End of App

    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>React with Google Maps API</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
	<style>
	body {
	font-family: sans-serif;
	}

	#map {
	height: 600px;
	}

	a {
	text-decoration: none;
	}
	</style>
	</head>
	<body>
	<div id='app'></div>

	<script type="text/babel">

	class App extends React.Component {
	constructor(props) {
	super(props)

	this.state = {
	city: 'Buenos Aires'
	}
	}

	selectCity = e => {
	const newValue = e.target.value
	this.setState({
	city: newValue
	})
	}

	render() {
	const { city } = this.state

	const imgUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=14&size=600x600`
	return (
	<div>
	<h1>Simple Google Maps Example using React</h1>
	<div id="map">
	<img src={imgUrl} alt={city} />
	</div>
	<div>
	<span>Current State: {JSON.stringify(this.state)}</span>
	</div>
	<button value="New York" onClick={this.selectCity}>New York</button>
	<button value="Buenos Aires" onClick={this.selectCity}>Buenos Aires</button>
	<footer>
	<p>This example was created using the <a href="https://developers.google.com/maps/documentation/static-maps/intro#top_of_page">Google Maps Static API</a></p>
	</footer>
	</div>
	)
	}

	} // End of App

	ReactDOM.render(
	<App />,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>