Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin
Created August 5, 2021 06:59
Show Gist options
  • Save adrianhajdin/ede527249054b7abbdf4e3a9fac95b5e to your computer and use it in GitHub Desktop.
Save adrianhajdin/ede527249054b7abbdf4e3a9fac95b5e to your computer and use it in GitHub Desktop.
Build and Deploy a Google Maps Travel Companion Application | React.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',
},
}));
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',
},
}));
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',
},
}));
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',
},
],
},
];
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',
},
}));
'https://www.foodserviceandhospitality.com/wp-content/uploads/2016/09/Restaurant-Placeholder-001.jpg'
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=your key here></script>
http://openweathermap.org/img/w/${data.weather[0].icon}.png
@kiritocode1
Copy link

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

@SammyTLN
Copy link

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.....

@ehindola
Copy link

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

@rolandexplore93
Copy link

Ensure you import alpha at the top

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

@Michaelstones
Copy link

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

@IRISHREX
Copy link

IRISHREX commented Jun 5, 2022

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

@Mertkiymazaslan
Copy link

Thank you!

@farmology
Copy link

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.

@ndikumanaisaie
Copy link

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

@ojayde1
Copy link

ojayde1 commented Jul 12, 2022

Thanks for the good work.

@shubham24315
Copy link

Awesome project ,Helped in learning lot of new things

@ReneKutter
Copy link

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

@yellomello6
Copy link

Thanks, man!

@divya-sh-u
Copy link

thanks 👌

@ndikumanaisaie
Copy link

ndikumanaisaie commented Jan 18, 2023 via email

@Aishwarya-1-2-3
Copy link

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

@ndikumanaisaie
Copy link

ndikumanaisaie commented Jan 24, 2023 via email

@Vishalll07
Copy link

Man there are 2 Mapstyles which one to put where

@info-aaditya
Copy link

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

@pankajmanjhi
Copy link

Really helpful. Thank you @adrianhajdin :)

@amenyenudaniel
Copy link

Thanks man

@Strangerharsh
Copy link

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??

@praveen321123
Copy link

Thats Great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment