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

HeaderStyles.js

import { alpha, makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    '&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.25) },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: { marginLeft: theme.spacing(3), width: 'auto' },
  },
  searchIcon: {
    padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0), paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { width: '20ch' },
  },
  toolbar: {
    display: 'flex', justifyContent: 'space-between',
  },
}));

ListStyles.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1), minWidth: 120, marginBottom: '30px',
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  loading: {
    height: '600px', display: 'flex', justifyContent: 'center', alignItems: 'center',
  },
  container: {
    padding: '25px',
  },
  marginBottom: {
    marginBottom: '30px',
  },
  list: {
    height: '75vh', overflow: 'auto',
  },
}));

MapStyles.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
  paper: {
    padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '100px',
  },
  mapContainer: {
    height: '85vh', width: '100%',
  },
  markerContainer: {
    position: 'absolute', transform: 'translate(-50%, -50%)', zIndex: 1, '&:hover': { zIndex: 2 },
  },
  pointer: {
    cursor: 'pointer',
  },
}));

mapStyles.js

export default [
  {
    featureType: 'all',
    elementType: 'all',
    stylers: [
      {
        saturation: '32',
      },
      {
        lightness: '-3',
      },
      {
        visibility: 'on',
      },
      {
        weight: '1.18',
      },
    ],
  },
  {
    featureType: 'administrative',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'on',
      },
    ],
  },
  {
    featureType: 'landscape',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off',
      },
    ],
  },
  {
    featureType: 'landscape.man_made',
    elementType: 'all',
    stylers: [
      {
        saturation: '-70',
      },
      {
        lightness: '14',
      },
    ],
  },
  {
    featureType: 'poi',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off',
      },
    ],
  },
  {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off',
      },
    ],
  },
  {
    featureType: 'transit',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off',
      },
    ],
  },
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
      {
        saturation: '100',
      },
      {
        lightness: '-14',
      },
    ],
  },
  {
    featureType: 'water',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off',
      },
      {
        lightness: '12',
      },
    ],
  },
];

PlaceDetailsStyles.js

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles(() => ({
  chip: {
    margin: '5px 5px 5px 0',
  },
  subtitle: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '10px',
  },
  spacing: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
}));

Placeholder Place Image

'https://www.foodserviceandhospitality.com/wp-content/uploads/2016/09/Restaurant-Placeholder-001.jpg'

Places Script

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=your key here></script>

Weather Icon

http://openweathermap.org/img/w/${data.weather[0].icon}.png

i see , thank you for this , ill cover it today as soon as p

its very helpful thank you sir.
my only question is how to add a hotels or visiting place that are local....

am doing a graduating project on the travel advisor but i was hopping to add some of my countries local hotels.....

in lines 13 and 14, of the HeaderStyle.js I get error saying 'alpha' is not defined

Ensure you import alpha at the top

import { alpha, makeStyles } from '@material-ui/core/styles'

hello please, i am having an error with the react-chartjs-2 below is the error code I am having
error1. Invalid scale configuration for scale: yAxes
error2.Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
pls how do I go about the error

makeStyles.js:3 Uncaught Error: MUI: makeStyles is no longer exported from @mui/material/styles.
You have to import it from @mui/styles.

now how tp deal with it

Thank you!

The header is aligning the items in a column, not a row. Did anyone else run into this problem? I can see that the flex-direction is set to column in inspect, but changing it manually to row still does not display the header items all in a neat row, and doesn't fix my problem. Adding flexDirection='row' to the Box doesn't do anything for me.

Thank you for this rich content that you are sharing with us for free

Thanks for the good work.

Awesome project ,Helped in learning lot of new things

Thank you very much for this awesome tutorial on Youtube ! :)

Thanks, man!

thanks 👌

Try to understand the code you are copying. It looks like you are trying to access the data that does not exist.

…

On Wed, Jan 18, 2023, 12:55 Thomas ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Is anyone here also getting 404 error, when clicking a single crypto. I really copy pasted the code, but always getting the 404 with "undefined" — Reply to this email directly, view it on GitHub <https://gist.github.com/ede527249054b7abbdf4e3a9fac95b5e#gistcomment-4440974> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANB6A65RCXAS642CJ6Q43XLWS7DZLBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCMJQHA3TQNZSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

I'm getting an axios error 400, please tell me how can i resolve this.
I was getting everything properly , but later suddenly nothing is printing ,not even in console

Check if you are not making bad request

…

On Tue, Jan 24, 2023, 16:50 Aishwarya-1-2-3 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ I'm getting an axios error 400, please tell me how can i resolve this. I was getting everything properly , but later suddenly nothing is printing ,not even in console — Reply to this email directly, view it on GitHub <https://gist.github.com/ede527249054b7abbdf4e3a9fac95b5e#gistcomment-4447108> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANB6A66NZRWJ5YDEQEIUIM3WT7T3VBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCMJQHA3TQNZSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Man there are 2 Mapstyles which one to put where

hi there,
Is there one more push with latest version of material UI for this project. I tried to upgrade I got white screen every times.

Thankyou

Really helpful. Thank you @adrianhajdin :)

Thanks man

when i am running the travel app git link on sandbox to run the project online it is showing error can anyone help me how to run the travel advisory app online or on my machine to show this to someone??

Thats Great!