In this article, we are going to build a Google Maps travel companion application using React.js. The application will allow users to search for and view locations on a map, as well as get directions to those locations.
To get started, we’ll need to create a new React project. We can do this using the create-react-app CLI.
npm install -g create-react-app
create-react-app google-maps-travel-companion
Once the project has been created, we can start adding our components. The first component we’ll need is the App component. This will act as the root component for our application.
src/App.js
import React, { Component } from ‘react’;
import ‘./App.css’;
class App extends Component {
render() {
return (
Google Maps Travel Companion
);
}
}
Next, we’ll need to create the Map component. This will render a map of the user’s current location.
src/Map.js
import React, { Component } from ‘react’;
import { GoogleMap } from ‘react-google-maps’;
class Map extends Component {
constructor(props) {
super(props);
this.state = {
map: null,
zoom: 10,
center: {
lat: 37.766,
lng: -122.419
}
};
}
render() {
return (
this.setState({
map: this.state.map,
zoom: this.state.zoom,
center