added google map

package-lock.json

@@ -1161,6 +1161,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@googlemaps/js-api-loader": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.6.0.tgz",
+      "integrity": "sha512-amuilneCf7q5A/jDUE3ml83c9NjW/3DzIqiBDFIKZcraD0JSKbetkEQa5s57Z6QY7jxcequXgoL9CKJUY1xZ5A=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6507,6 +6512,17 @@
         }
       }
     },
+    "google-map-react": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.1.8.tgz",
+      "integrity": "sha512-7oaCVBO/nZBMQNTeIyGSwlWud9PgY+acO6yKxBcn95dD5I6flIOwfAfsqg8Ez751UrAOEWpP1v+PPdJaQd2Xug==",
+      "requires": {
+        "@googlemaps/js-api-loader": "^1.4.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "eventemitter3": "^4.0.4",
+        "prop-types": "^15.7.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.2",
     "express": "^4.17.1",
+    "google-map-react": "^2.1.8",
     "leaflet": "^1.7.1",
     "pigeon-draggable": "^0.1.1",
     "pigeon-maps": "^0.16.1",

src/App.js

@@ -10,6 +10,7 @@ import About from './About';
 import Pigeon from './Pigeon';
 import Mapbox from './Mapbox';
 import Leaflet from './Leaflet';
+import Google from './Google';
 
 export class App extends React.Component{
     render(){
@@ -23,6 +24,7 @@ export class App extends React.Component{
                   <Route path="/pigeon-map" exact component={Pigeon} />
                   <Route path="/mapbox-gl" exact component={Mapbox} />
                   <Route path="/leaflet" exact component={Leaflet} />
+                  <Route path="/google-map" exact component={Google} />
                 </Switch>
                 <Footer />
               </Router>

src/Google.js

@@ -0,0 +1,39 @@
+import React from "react";
+import GoogleMapReact from 'google-map-react';
+import "./css/maps.css";
+
+const LONGITUDE = 14.320570
+const LATITUDE = 48.336950
+
+const AnyReactComponent = ({ text }) => <div>{text}</div>;
+
+export default class Google extends React.Component{
+  state = {
+    latitude: LATITUDE,
+    longitude: LONGITUDE,
+    zoom: 15,
+    }
+  
+  render() {
+    const position = [this.state.latitude, this.state.longitude]
+    return (
+      <div style={{ height: '450px', width: '600px' }}>
+        <GoogleMapReact
+          bootstrapURLKeys={{ key: "AIzaSyBD8LxHc8lWhx6Lwxaha92dMQc-EBr82wU" }}
+          defaultCenter={position}
+          defaultZoom={this.state.zoom}
+          yesIWantToUseGoogleMapApiInternals
+          layerTypes={['TrafficLayer', 'TransitLayer']}
+        >
+        
+          <AnyReactComponent
+            lat={59.955413}
+            lng={30.337844}
+            text="My Marker"
+          />
+
+        </GoogleMapReact>
+      </div>
+    );
+  }
+}

src/Navigation.js

@@ -23,6 +23,9 @@ class Navigation extends React.Component{
                   <li className={`nav-item  ${this.props.location.pathname === "/leaflet" ? "active" : ""}`}>
                     <Link className="nav-link" to="/leaflet">Leaflet Map</Link>
                   </li>
+                  <li className={`nav-item  ${this.props.location.pathname === "/google-map" ? "active" : ""}`}>
+                    <Link className="nav-link" to="/google-map">Google Map</Link>
+                  </li>
                 </ul>
               </div>
             </nav>