try react google map

Author: Ajeet

packages/rich-app/src/pages/home/homeLayout.tsx

@@ -13,8 +13,11 @@ import { showSuccessToast } from '../../utils/toastUtil'
 import { copyInputTextToClipboard } from '../../utils/commonUtils'
 import { ICar } from './iHome'
 import useDocumentTitle from '../../hooks/useDocumentTitle'
+import axios from 'axios'
 
 export default function HomeContainer() {
+  axios.get('https://quotesland-apis.herokuapp.com/v1/quotes/quote-of-the-day')
+
   useDocumentTitle('Home')
   const { formatMessage } = useIntl()
   const dispatch: any = useDispatch()

packages/typescript-app/package.json

@@ -46,6 +46,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
     "react-dom": "^17.0.2",
+    "react-google-maps": "^9.4.5",
     "react-refresh": "^0.11.0",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",

packages/typescript-app/src/App.css

@@ -1,26 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { MyMapComponent } from './components/Map'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <MyMapComponent
+        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+        loadingElement={<div style={{ height: `100%` }} />}
+        containerElement={<div style={{ height: `400px` }} />}
+        mapElement={<div style={{ height: `100%` }} />}
+      />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

packages/typescript-app/src/App.tsx

@@ -0,0 +1,16 @@
+import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
+
+export const MyMapComponent = withScriptjs(
+  withGoogleMap((props: any) => (
+    <GoogleMap zoom={18} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
+      <Marker
+        position={{ lat: -34.397, lng: 150.644 }}
+        icon={{
+          url: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png',
+          innerWidth: 100,
+          innerHeight: 100,
+        }}
+      />
+    </GoogleMap>
+  ))
+)

packages/typescript-app/src/components/Map.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()