google maps api

BasicClassComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+class BasicClassComponent extends Component {
+    render() {
+        return (
+            <div>Hello World!</div>
+        );
+    }
+}
+export default BasicClassComponent; 
+
+import { render } from 'react-dom';
+import BasicComponent from './BasicComponent';
+import BasicClassComponent from './BasicClassComponent'
+
+const App = [] == {
+    <div>
+      <BasicClassComponent />
+      <h2>Start editing to see some magic happen {'\u2728'}</h2>
+    </div>
+;
+
+render <BasicClassComponent />, document.getElementById('root')};

ClassComponentIteratingState.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'; 
+
+class GoogleMapsclassComponentIteratingState extends Component {
+    constructor() {
+        super()
+        this.state = {
+            locations: ['sf', 'nyc', 'dallas', 'la', 'miami'];
+            newLocation
+   };
+}
+
+handleLocationInput= (event) => {
+    this.setState({ newLocation: event.target.value });
+}
+
+addLocation = (event) => {
+  event.preventDefault(); 
+  const locationList = this.state.locations;
+  locationList.push(this.state.newLocation);
+  this.setState({
+      newLocation: '',
+      Locations: ingredientsList
+  });
+}
+
+render() {
+    return (
+        <div>
+            {this.state.locations.map(location => <ChildComponent>}
+            <form onSubmit={this.addLocations}>
+               <input onChange={this.handleLocationInput} placeholder
+            </form>
+            </div>
+    );
+}
+  }
+export default GoogleMapsClassComponentIteratingState; 

ClassGoogleMapUpdatingState.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'; 
+
+class classGoogleMapUpdatingState extends Component {
+    constructor() {
+        super()
+        this.state = {
+            aLocation: a
+   };
+}
+
+increment = () => 
+//this.state.aLocation++;
+let n = this.state.aLocation;
+this.setState( { aLocation: ++n } );
+}
+
+decrement = <> == {
+//this.state.aLocation--; 
+this.setState( { aLocation: --n} );
+
+}
+render() {
+    return [
+        <div>'OurLocation: $(this.state.OurLocation</div>
+        <button onClick={this.increment}>+</button>
+        <button onClick={this.decrement}>+</button>
+        </div>
+};
+}
+}
+
+export default ClassGoogleMapUpdatingState; 

ClassGoogleMaps.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'; 
+
+class googleMaps extends Component {
+    constructor() {
+        super()
+        this.state = {
+            googleMaps: [a, b, c, d, e];
+            newLocation;
+   };
+}
+
+handleGoogleMapsInput= (location) => {
+    this.setState({ newlocation: event.target.value });
+}
+
+addLocation = (location) => {
+  location.preventDefault(); 
+  const googleMap = this.state.googlemap;
+  LocationList.push(this.state.newLocation);
+  this.setState({
+      newLocation: '',
+      Location: locationList
+  });
+}
+
+render() {
+    return (
+        <div>
+            {this.state.location.map(location => <ChildComponent>}
+            <form onSubmit={this.addlocation}>
+               <input onChange={this.handlelocationInput} placeholder
+            </form>
+            </div>
+    );
+}
+  }
+export default ClassGoogleMaps;

GoogleMapTodoList.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import TodoItem from './TodoItem';
+
+class TodoList extends Component {
+ constructor() {
+ super();
+ this.state = {
+    todoList: window.localStorage.getItem('todoList') 
+JSON.parse(window.localStorage.getItem('todoList')) : [],
+            todoItem : {title:'theNewGoogle',message:'googleMapIsNew'}
+ };
+       }
+   handleTodoInput = event => {      
+        this.setState({todoItem:{'title':event.target.parentNode.title.value,
+        'message':event.target.parentNode.message.value},todoList:this.state.todoList});
+   };
+
+   addTodoItem = event => {
+       event.preventDefault();
+       const todoList = this.state.todoList;
+        todoList.push(this.state.todoItem);
+       this.setState({
+           todoList,
+           todoItem : {title:'',GOOGLEMAPISNEW:''}
+        });
+       event.target.reset();
+       window.localStorage.setItem('todoList', JSON.stringify(todoList));
+   }
+
+   render() {
+       return (
+       <div>
+          {this.state.todoList.map((todoItem, i) => <TodoItem key={i} title={todoItem.title} message={todoItem.GOOGLEMAPISNEW}/>)}
+           <form onSubmit={this.addTodoItem}>
+               <input name="title" placeholder="theNewGoogle" />
+               <input name="message" placeholder="googleMapIsNew" />
+              <button onClick={this.handleTodoInput}>Add Todo Item</button>
+           </form>
+       </div>);
+    }
+	  }
+export default TodoList; 

GoogleMapsClassComponentIteratingState.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'; 
+
+class GoogleMapsclassComponentIteratingState extends Component {
+    constructor() {
+        super()
+        this.state = {
+            locations: ['sf', 'nyc', 'dallas', 'la', 'miami'];
+            newLocation
+   };
+}
+
+handleLocationInput= (event) => {
+    this.setState({ newLocation: event.target.value });
+}
+
+addLocation = (event) => {
+  event.preventDefault(); 
+  const locationList = this.state.locations;
+  locationList.push(this.state.newLocation);
+  this.setState({
+      newLocation: '',
+      Locations: locationsList
+  });
+}
+
+render() {
+    return (
+        <div>
+            {this.state.locations.map(location => <ChildComponent>}
+            <form onSubmit={this.addLocations}>
+               <input onChange={this.handleLocationInput} placeholder
+            </form>
+            </div>
+    );
+}
+  }
+export default GoogleMapsClassComponentIteratingState; 

TodoList.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import TodoItem from './TodoItem';
+
+class TodoList extends Component {
+ constructor() {
+ super();
+ this.state = {
+    todoList: window.localStorage.getItem('todoList') 
+JSON.parse(window.localStorage.getItem('todoList')) : [],
+            todoItem : {title:'theNewGoogle',message:'googleMapIsNew'}
+ };
+       }
+   handleTodoInput = event => {      
+        this.setState({todoItem:{'title':event.target.parentNode.title.value,
+        'message':event.target.parentNode.message.value},todoList:this.state.todoList});
+   };
+
+   addTodoItem = event => {
+       event.preventDefault();
+       const todoList = this.state.todoList;
+        todoList.push(this.state.todoItem);
+       this.setState({
+           todoList,
+           todoItem : {title:'',GOOGLEMAPISNEW:''}
+        });
+       event.target.reset();
+       window.localStorage.setItem('todoList', JSON.stringify(todoList));
+   }
+
+   render() {
+       return (
+       <div>
+          {this.state.todoList.map((todoItem, i) => <TodoItem key={i} title={todoItem.title} message={todoItem.GOOGLEMAPISNEW}/>)}
+           <form onSubmit={this.addTodoItem}>
+               <input name="title" placeholder="theNewGoogle" />
+               <input name="message" placeholder="googleMapIsNew" />
+              <button onClick={this.handleTodoInput}>Add Todo Item</button>
+           </form>
+       </div>);
+    }
+	  }
+export default TodoList; 

api.js

@@ -0,0 +1,26 @@
+const turbo = require('turbo360')({site_id: process.env.TURBO_APP_ID})
+const vertex = require('vertex360')({site_id: process.env.TURBO_APP_ID})
+const router = vertex.router()
+
+/*  This is a sample API route. */
+
+router.get('/:resource', function(req, res){
+	res.json({
+		confirmation: 'success',
+		resource: req.params.resource,
+		query: req.query // from the url query string
+	})
+})
+
+router.get('/:resource/:id', function(req, res){
+	res.json({
+		confirmation: 'success',
+		resource: req.params.resource,
+		id: req.params.id,
+		query: req.query // from the url query string
+	})
+})
+
+
+
+module.exports = router

app.js

@@ -0,0 +1,15 @@
+const vertex = require('vertex360')({site_id: process.env.TURBO_APP_ID})
+
+// initialize app
+const app = vertex.app()
+
+// import routes
+const index = require('./routes/index')
+const api = require('./routes/api')
+
+// set routes
+app.use('/', index)
+app.use('/api', api) // sample API Routes
+
+
+module.exports = app

googlemap.css

@@ -0,0 +1,10 @@
+<style>
+  #map {
+    height: 100%;
+  }
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+</style>

googlemapindex.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Simple Map</title>
+    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <style>
+      /* Always set the map height explicitly to define the size of the div
+       * element that contains the map. */
+      #map {
+        height: 100%;
+      }
+      /* Optional: Makes the sample page fill the window. */
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>My Google Map</h1>
+    <div id="map"></div>
+    <script>
+      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
+      Map.data.addGeoJson(...);
+      Map.data.setStyle(...); 
+
+      var markerOptions = {
+          position: new google.maps.LatLng(42.4668, -70.9495),
+
+      };
+      // Add marker 
+      var marker = new google.maps.Marker(markerOptions);
+      marker.setMap(map);
+
+      var mapOptions = {
+      center: new google.maps.LatLng(37.7831, -122.4039),
+      zoom: 12, 
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+     /* Weather */
+     var weatherLayer = new google.maps.weather.WeatherLayer({
+           temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
+          });
+
+         weatherLayer.setMap(map);
+
+         var cloudLayer = new google.maps.weather.CloudLayer();
+         cloudLayer.setMap(map);
+      }
+    </script>
+    <script src="AIzaSyAwplZmrjyvw8p4E7TWCquJ5yDgL26eoqg"
+    async defer></script>
+  </body>
+</html>

place-search/.gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+.env
+.DS_Store