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
@praveen321123
Copy link

Thats Great!

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