Create a simple google map component

.eslintrc.js

@@ -1,19 +1,18 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
+  env: {
+    browser: true,
+    es6: true,
   },
-  "plugins": [
-    "react",
-  ],
-  "globals": {
-    "graphql": false,
+  plugins: ['react'],
+  globals: {
+    graphql: false,
   },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
     },
-  }
+  },
 }

package.json

@@ -22,13 +22,15 @@
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-remark": "next",
     "gatsby-transformer-sharp": "next",
+    "google-map-react": "^1.0.6",
     "prismjs": "^1.15.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-helmet": "^5.2.0",
     "styled-components": "^3.3.3"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.6",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.7.0",
     "prettier": "^1.12.0"

src/components/Map.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import GoogleMapReact from 'google-map-react'
+
+const AnyReactComponent = ({ text }) => <div>{text}</div>
+
+class SimpleMap extends React.Component {
+  static defaultProps = {
+    center: {
+      lat: 59.95,
+      lng: 30.33,
+    },
+    zoom: 11,
+  }
+
+  render() {
+    return (
+      // Important! Always set the container height explicitly
+      <div style={{ height: '100vh', width: '100%' }}>
+        <GoogleMapReact
+          bootstrapURLKeys={{ key: '' }}
+          defaultCenter={this.props.center}
+          defaultZoom={this.props.zoom}
+        >
+          <AnyReactComponent
+            lat={59.955413}
+            lng={30.337844}
+            text={'Kreyser Avrora'}
+          />
+        </GoogleMapReact>
+      </div>
+    )
+  }
+}
+
+export default SimpleMap

src/pages/fpv-spots.js

@@ -1,8 +1,10 @@
 import React from 'react'
+import Map from '../components/Map'
 
 const FPVSpotsPage = () => (
   <div>
     <h1>FPV Spots Page</h1>
+    <Map />
   </div>
 )