Add maps

faheemzunjani · Oct 20, 2018 · 2a5f022 · 2a5f022
1 parent c89a902
commit 2a5f022
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 27 deletions.
diff --git a/poolpal_frontend/public/index.html b/poolpal_frontend/public/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+      <!-- And then your bundled js -->
+      <script src="path/to/your/bundle.js"></script>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -22,13 +27,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBnFHn_t5BL4X3ZpjavPznyjtFN8MltXzo&libraries=places'></script>
     <title>React App</title>
   </head>
   <body>
-      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
-  <!-- And then your bundled js -->
-  <script src="path/to/your/bundle.js"></script>
+
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/poolpal_frontend/src/Login.js b/poolpal_frontend/src/Login.js
@@ -14,7 +14,7 @@ const rowHeight1 = {
 };
 
 const rowHeight2 = {
-    height: "7%"
+    height: "20%"
 };
 export default class Login extends Component {
     constructor() {

diff --git a/poolpal_frontend/src/Request.js b/poolpal_frontend/src/Request.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import styles from './css/Login.module.css';
+import './index.css'
 import {
     MediaBox,
     Navbar,
@@ -54,22 +55,82 @@ export default class Login extends Component {
         })
         this.props.history.goBack()
     }
+    componentDidMount() {
+        let map = new window.google.maps.Map(document.getElementById('map'), {
+            center: { lat: 25.4358, lng: 81.8463 },
+            zoom: 13,
+            mapTypeId: 'roadmap',
+        });
 
+        // var directionsService = new window.google.maps.DirectionsService();
+        // var directionsDisplay = new window.google.maps.DirectionsRenderer();
+        // var chicago = new window.google.maps.LatLng(41.850033, -87.6500523);
+        // var mapOptions = {
+        //   zoom:7,
+        //   center: chicago
+        // }
+        // let map = new window.google.maps.Map(document.getElementById('map'), mapOptions);
+        // directionsDisplay.setMap(map);
+
+        // this.calculateAndDisplayRoute(directionsService, directionsDisplay);
+
+
+        map.addListener('zoom_changed', () => {
+            this.setState({
+                zoom: map.getZoom(),
+            });
+        });
+
+        map.addListener('maptypeid_changed', () => {
+            this.setState({
+                maptype: map.getMapTypeId(),
+            });
+        });
+
+        let marker = new window.google.maps.Marker({
+            map: map,
+            position: { lat: 25.4358, lng: 81.8463 },
+        });
+
+        // initialize the autocomplete functionality using the #pac-input input box
+        let inputNode = document.getElementById('pac-input');
+        // map.controls[window.google.maps.ControlPosition.TOP_LEFT].push(inputNode);
+        let autoComplete = new window.google.maps.places.Autocomplete(inputNode);
+
+        autoComplete.addListener('place_changed', () => {
+            let place = autoComplete.getPlace();
+            let location = place.geometry.location;
+
+            this.setState({
+                place_formatted: place.formatted_address,
+                place_id: place.place_id,
+                place_location: location.toString(),
+            });
+
+            console.log(this.state.place_formatted + " " + this.state.place_id + " " + this.state.place_location)
+
+            // bring the selected place in view on the map
+            map.fitBounds(place.geometry.viewport);
+            map.setCenter(location);
+
+            marker.setPlace({
+                placeId: place.place_id,
+                location: location,
+            });
+        });
+    }
     render() {
         return (
-            <div>
+            <div id="app">
                 <Navbar brand="New Request" right className="grey darken-4">
-                    <NavItem href={'/home/'+this.props.match.params.id+'/'+this.props.match.params.pwd}>Profile</NavItem>
+                    <NavItem href={'/home/' + this.props.match.params.id + '/' + this.props.match.params.pwd}>Profile</NavItem>
                     <NavItem href={'/'}>Logout</NavItem>
-                    <NavItem href={'/myrequests/'+this.props.match.params.id+'/'+this.props.match.params.pwd}>My Requests</NavItem>
+                    <NavItem href={'/myrequests/' + this.props.match.params.id + '/' + this.props.match.params.pwd}>My Requests</NavItem>
                 </Navbar>
                 <Row style={rowHeight3} />
                 <form onSubmit={this.requestsend}>
                     <Row>
                         <Col s={10} offset="s1">
-                            <Col s={12}>
-                                <label>Area</label>
-                            </Col>
                             <Input s={12} type="select" defaultValue="" id="area">
                                 <option value="" disabled>
                                     Pick Area
@@ -81,21 +142,16 @@ export default class Login extends Component {
                         </Col>
 
                         <Col s={10} offset="s1">
-                            <Col s={12}>
-                                <label>Request expires after</label>
-                            </Col>
                             <Input
                                 s={12}
                                 name="on"
                                 type="time"
                                 id="time"
+                                placeholder="Request expires after"
                                 onChange={function (e, value) { }}
                             />
                         </Col>
                         <Col s={10} offset="s1">
-                            <Col s={12}>
-                                <label>Item Required</label>
-                            </Col>
                             <Input
                                 s={12}
                                 id="item"
@@ -104,17 +160,22 @@ export default class Login extends Component {
                                 placeholder="Enter item required"
                             />
                         </Col>
+                    </Row>
+                    <Row>
                         <Col s={10} offset="s1">
                             <Col s={12}>
-                                <label>Additional Instructions</label>
+                            <div id='pac-container'>
+                                <input id='pac-input' type='text' placeholder='Enter a location' />
+                            </div>
                             </Col>
-                            <Input
-                                s={12}
-                                id="description"
-                                type="text"
-                                className="validate"
-                                placeholder="Enter additional instructions"
-                            />
+                        </Col>
+                    </Row>
+                    <Row></Row>
+                    <Row>
+                        <Col s={10} offset="s1">
+                            <Col s={12}>
+                                <div id="map"></div>
+                            </Col>  
                         </Col>
                     </Row>
                     <Row style={rowHeight4}>

diff --git a/poolpal_frontend/src/index.css b/poolpal_frontend/src/index.css
@@ -1,7 +1,33 @@
-body {
+html,body {
   background-color:blue ;
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  color: black
+  color: black;
+  height:100%
 }
+#map{
+  height:50vh;
+  width:100%;
+}
+#app{
+
+}
+#root{
+  height:100%
+}
+#pac-input {
+  /* background-color: #fff;
+  font-family: Roboto;
+  font-size: 15px;
+  font-weight: 300;
+  margin-left: 12px;
+  padding: 0 11px 0 13px;
+  text-overflow: ellipsis;
+  width: 20vw;
+  height:20vh; */
+}
+
+#pac-input:focus {
+  /* border-color: #4d90fe; */
+}