From 18a5986b83965346860222800ad9d54f9d8a4f05 Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Wed, 21 Jul 2021 01:04:38 +0800
Subject: [PATCH 1/6] add markerPosition prop

---
 src/google_map_markers.js | 64 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index e2fbb666..8e1640c2 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -24,6 +24,25 @@ const style = {
   position: 'absolute',
 };
 
+const markerWrapperStyles = {
+  ...style,
+  height: null,
+  width: null,
+};
+
+const markerAxisX = {
+  left: 0,
+  center: '-50%',
+  right: '-100%',
+};
+
+const markerAxisY = {
+  top: 0,
+  center: '-50%',
+  bottom: '-100%',
+};
+const isNotProduction = process.env.NODE_ENV !== 'production';
+
 export default class GoogleMapMarkers extends Component {
   /* eslint-disable react/forbid-prop-types */
   static propTypes = {
@@ -320,20 +339,49 @@ export default class GoogleMapMarkers extends Component {
           ...latLng,
         };
 
+        const markerPosition = child.props.markerPosition || 'center center';
+
+        if (typeof markerPosition === 'string') {
+          [this.markerPosX, this.markerPosY] = markerPosition.trim().split(' ');
+
+          if (!markerAxisX[this.markerPosX] && isNotProduction)
+            console.error(
+              `Invalid x value passed for markerPosition, expected strings left,center or right`
+            );
+
+          if (!markerAxisY[this.markerPosY] && isNotProduction)
+            console.error(
+              `Invalid y value passed for markerPosition, expected strings top,center or bottom`
+            );
+        } else if (isNotProduction) {
+          console.error(
+            `Warning: Failed prop type: Invalid prop markerPosition of ${typeof markerPosition} supplied, expected string`
+          );
+        }
+
         return (
           <div
             key={childKey}
             style={{ ...style, ...stylePtPos }}
             className={child.props.$markerHolderClassName}
           >
-            {React.cloneElement(child, {
-              $hover: childKey === this.state.hoverKey,
-              $getDimensions: this._getDimensions,
-              $dimensionKey: childKey,
-              $geoService: this.props.geoService,
-              $onMouseAllow: this._onMouseAllow,
-              $prerender: this.props.prerender,
-            })}
+            <div
+              style={{
+                ...markerWrapperStyles,
+                transform: `translate(${markerAxisX[this.markerPosX]},${
+                  markerAxisY[this.markerPosY]
+                })`,
+              }}
+            >
+              {React.cloneElement(child, {
+                $hover: childKey === this.state.hoverKey,
+                $getDimensions: this._getDimensions,
+                $dimensionKey: childKey,
+                $geoService: this.props.geoService,
+                $onMouseAllow: this._onMouseAllow,
+                $prerender: this.props.prerender,
+              })}
+            </div>
           </div>
         );
       }

From 556bd782f22f9014f673e229408a28d992533a8c Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Wed, 21 Jul 2021 01:20:47 +0800
Subject: [PATCH 2/6] use existing marker wrapper

---
 src/google_map_markers.js | 41 ++++++++++++++-------------------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index 8e1640c2..61379530 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -16,20 +16,12 @@ const mainStyle = {
 };
 
 const style = {
-  width: 0,
-  height: 0,
   left: 0,
   top: 0,
   backgroundColor: 'transparent',
   position: 'absolute',
 };
 
-const markerWrapperStyles = {
-  ...style,
-  height: null,
-  width: null,
-};
-
 const markerAxisX = {
   left: 0,
   center: '-50%',
@@ -362,26 +354,23 @@ export default class GoogleMapMarkers extends Component {
         return (
           <div
             key={childKey}
-            style={{ ...style, ...stylePtPos }}
+            style={{
+              ...style,
+              ...stylePtPos,
+              transform: `translate(${markerAxisX[this.markerPosX]},${
+                markerAxisY[this.markerPosY]
+              }`,
+            }}
             className={child.props.$markerHolderClassName}
           >
-            <div
-              style={{
-                ...markerWrapperStyles,
-                transform: `translate(${markerAxisX[this.markerPosX]},${
-                  markerAxisY[this.markerPosY]
-                })`,
-              }}
-            >
-              {React.cloneElement(child, {
-                $hover: childKey === this.state.hoverKey,
-                $getDimensions: this._getDimensions,
-                $dimensionKey: childKey,
-                $geoService: this.props.geoService,
-                $onMouseAllow: this._onMouseAllow,
-                $prerender: this.props.prerender,
-              })}
-            </div>
+            {React.cloneElement(child, {
+              $hover: childKey === this.state.hoverKey,
+              $getDimensions: this._getDimensions,
+              $dimensionKey: childKey,
+              $geoService: this.props.geoService,
+              $onMouseAllow: this._onMouseAllow,
+              $prerender: this.props.prerender,
+            })}
           </div>
         );
       }

From f8cac72a1935022e05f2166ac152a1b6f3de6e7d Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Thu, 22 Jul 2021 04:48:06 +0800
Subject: [PATCH 3/6] print error in none production env

---
 src/google_map_markers.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index 61379530..24dea5f5 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -33,7 +33,7 @@ const markerAxisY = {
   center: '-50%',
   bottom: '-100%',
 };
-const isNotProduction = process.env.NODE_ENV !== 'production';
+const isProduction = process.env.NODE_ENV === 'production';
 
 export default class GoogleMapMarkers extends Component {
   /* eslint-disable react/forbid-prop-types */
@@ -336,16 +336,16 @@ export default class GoogleMapMarkers extends Component {
         if (typeof markerPosition === 'string') {
           [this.markerPosX, this.markerPosY] = markerPosition.trim().split(' ');
 
-          if (!markerAxisX[this.markerPosX] && isNotProduction)
+          if (!markerAxisX[this.markerPosX] && !isProduction)
             console.error(
               `Invalid x value passed for markerPosition, expected strings left,center or right`
             );
 
-          if (!markerAxisY[this.markerPosY] && isNotProduction)
+          if (!markerAxisY[this.markerPosY] && !isProduction)
             console.error(
               `Invalid y value passed for markerPosition, expected strings top,center or bottom`
             );
-        } else if (isNotProduction) {
+        } else if (!isProduction) {
           console.error(
             `Warning: Failed prop type: Invalid prop markerPosition of ${typeof markerPosition} supplied, expected string`
           );

From eefa0e40a8906ea8fe27e0ca72f725617566357e Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Thu, 22 Jul 2021 13:53:47 +0800
Subject: [PATCH 4/6] use `center bottom` as default marker position

---
 src/google_map_markers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index 24dea5f5..97ea6369 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -331,7 +331,7 @@ export default class GoogleMapMarkers extends Component {
           ...latLng,
         };
 
-        const markerPosition = child.props.markerPosition || 'center center';
+        const markerPosition = child.props.markerPosition || 'center bottom';
 
         if (typeof markerPosition === 'string') {
           [this.markerPosX, this.markerPosY] = markerPosition.trim().split(' ');

From 93e795043732399cfd1ab57642ce60fb2ce57525 Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Thu, 22 Jul 2021 13:55:02 +0800
Subject: [PATCH 5/6] add missing closing bracket

---
 src/google_map_markers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index 97ea6369..254f7fe4 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -359,7 +359,7 @@ export default class GoogleMapMarkers extends Component {
               ...stylePtPos,
               transform: `translate(${markerAxisX[this.markerPosX]},${
                 markerAxisY[this.markerPosY]
-              }`,
+              })`,
             }}
             className={child.props.$markerHolderClassName}
           >

From 755bfa379491c0aca0d1b7aa9c10cbb7321fb369 Mon Sep 17 00:00:00 2001
From: Ian <38500123+IBanda@users.noreply.github.com>
Date: Fri, 6 Aug 2021 13:15:31 +0200
Subject: [PATCH 6/6] position marker using `markerPosition` prop

---
 example/src/App.js               | 24 +++++++++++-------------
 example/src/components/Marker.js | 11 +----------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/example/src/App.js b/example/src/App.js
index 73ac6678..f2b557b2 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
-import GoogleMapReact from 'google-map-react'
+import GoogleMapReact from 'google-map-react';
 // import 'google-map-react/dist/index.css'
 
 import LOS_ANGELES_CENTER from './const/la_center';
@@ -14,17 +14,17 @@ const Wrapper = styled.main`
 `;
 
 const App = () => {
-  const [places, setPlaces] = useState([])
+  const [places, setPlaces] = useState([]);
 
   const fetchPlaces = async () => {
     fetch('places.json')
-    .then((response) => response.json())
-    .then((data) => setPlaces(data.results))
-  }
+      .then((response) => response.json())
+      .then((data) => setPlaces(data.results));
+  };
 
   useEffect(() => {
     fetchPlaces();
-  }, [])
+  }, []);
 
   if (!places || places.length === 0) {
     return null;
@@ -32,21 +32,19 @@ const App = () => {
 
   return (
     <Wrapper>
-      <GoogleMapReact
-        defaultZoom={10}
-        defaultCenter={LOS_ANGELES_CENTER}
-      >
+      <GoogleMapReact defaultZoom={10} defaultCenter={LOS_ANGELES_CENTER}>
         {places.map((place) => (
           <Marker
             key={place.id}
             text={place.name}
             lat={place.geometry.location.lat}
             lng={place.geometry.location.lng}
+            markerPosition='center center'
           />
         ))}
       </GoogleMapReact>
     </Wrapper>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/example/src/components/Marker.js b/example/src/components/Marker.js
index 09af5e4a..4549bc8b 100644
--- a/example/src/components/Marker.js
+++ b/example/src/components/Marker.js
@@ -3,28 +3,19 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
   width: 18px;
   height: 18px;
   background-color: #000;
   border: 2px solid #fff;
   border-radius: 100%;
   user-select: none;
-  transform: translate(-50%, -50%);
   cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
   &:hover {
     z-index: 1;
   }
 `;
 
-const Marker = ({ text, onClick }) => (
-  <Wrapper
-    alt={text}
-    onClick={onClick}
-  />
-);
+const Marker = ({ text, onClick }) => <Wrapper alt={text} onClick={onClick} />;
 
 Marker.defaultProps = {
   onClick: null,