Make Money Online HTML PHP JAVASCRIPT Build and Deploy a Google Maps Travel Companion Application | React.js

Build and Deploy a Google Maps Travel Companion Application | React.js

Build and Deploy a Google Maps Travel Companion Application | React.js post thumbnail image


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

Related Post