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,
diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index e2fbb666..254f7fe4 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -16,14 +16,25 @@ const mainStyle = {
 };
 
 const style = {
-  width: 0,
-  height: 0,
   left: 0,
   top: 0,
   backgroundColor: 'transparent',
   position: 'absolute',
 };
 
+const markerAxisX = {
+  left: 0,
+  center: '-50%',
+  right: '-100%',
+};
+
+const markerAxisY = {
+  top: 0,
+  center: '-50%',
+  bottom: '-100%',
+};
+const isProduction = process.env.NODE_ENV === 'production';
+
 export default class GoogleMapMarkers extends Component {
   /* eslint-disable react/forbid-prop-types */
   static propTypes = {
@@ -320,10 +331,36 @@ export default class GoogleMapMarkers extends Component {
           ...latLng,
         };
 
+        const markerPosition = child.props.markerPosition || 'center bottom';
+
+        if (typeof markerPosition === 'string') {
+          [this.markerPosX, this.markerPosY] = markerPosition.trim().split(' ');
+
+          if (!markerAxisX[this.markerPosX] && !isProduction)
+            console.error(
+              `Invalid x value passed for markerPosition, expected strings left,center or right`
+            );
+
+          if (!markerAxisY[this.markerPosY] && !isProduction)
+            console.error(
+              `Invalid y value passed for markerPosition, expected strings top,center or bottom`
+            );
+        } else if (!isProduction) {
+          console.error(
+            `Warning: Failed prop type: Invalid prop markerPosition of ${typeof markerPosition} supplied, expected string`
+          );
+        }
+
         return (
           <div
             key={childKey}
-            style={{ ...style, ...stylePtPos }}
+            style={{
+              ...style,
+              ...stylePtPos,
+              transform: `translate(${markerAxisX[this.markerPosX]},${
+                markerAxisY[this.markerPosY]
+              })`,
+            }}
             className={child.props.$markerHolderClassName}
           >
             {React.cloneElement(child, {