required changes added.

Author: abdurrahmanekr

README.md

@@ -428,6 +428,8 @@ import { LocationMessage } from 'react-chat-elements'
 | ---- | ---- | ---- | ---- |
 | src | none | image | image src |
 | apiKey | none | string | google staticmap api key |
+| zoom | 14 | int | google staticmap zoom level |
+| markerColor | red | string | google staticmap marker color |
 | data | {} | object | message data |
 | target | _blank | string | image a tag target prop |
 | onOpen | none | function | image on open |

src/LocationMessage/LocationMessage.css

@@ -1,6 +1,7 @@
 .rce-mbox-location {
     position: relative;
     width: 250px;
+    height: 150px;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -16,7 +17,8 @@
 }
 
 .rce-mbox-location-text {
-  width: 250px;
-  margin-left: -6px;
-  margin-right: -6px;
+    padding: 5px 0;
+    width: 250px;
+    margin-left: -6px;
+    margin-right: -6px;
 }

src/LocationMessage/LocationMessage.js

@@ -5,8 +5,6 @@ const classNames = require('classnames');
 
 const STATIC_URL = 'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY';
 const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE&zoom=ZOOM';
-const DEFAULT_MARKER_COLOR = 'red';
-const DEFAULT_ZOOM_LEVEL = 14;
 
 export class LocationMessage extends Component {
     constructor(props) {
@@ -20,19 +18,19 @@ export class LocationMessage extends Component {
 
         return url.replace('LATITUDE', center.latitude)
                   .replace('LONGITUDE', center.longitude)
-                  .replace('MARKER_COLOR', this.props.markerColor || DEFAULT_MARKER_COLOR)
-                  .replace('ZOOM', this.props.zoom || DEFAULT_ZOOM_LEVEL)
+                  .replace('MARKER_COLOR', this.props.markerColor)
+                  .replace('ZOOM', this.props.zoom)
                   .replace('KEY', this.props.apiKey);
     }
 
     className() {
-      var className = classNames('rce-mbox-location', this.props.className);
+        var className = classNames('rce-mbox-location', this.props.className);
 
-      if (this.props.text && this.props.text.length > 0) {
-        className = classNames(className, 'rce-mbox-location-has-text');
-      }
+        if (this.props.text) {
+            className = classNames(className, 'rce-mbox-location-has-text');
+        }
 
-      return className;
+        return className;
     }
 
     render() {
@@ -43,11 +41,11 @@ export class LocationMessage extends Component {
                     target={this.props.target}
                     href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
                     className={this.className()}>
-                        <img className='rce-mbox-location-img'
-                             src={
-                                 this.props.src ||
-                                 this.buildURL(STATIC_URL)
-                             }/>
+                    <img className='rce-mbox-location-img'
+                        src={
+                            this.props.src ||
+                            this.buildURL(STATIC_URL)
+                        }/>
                 </a>
                 {
                     this.props.text &&
@@ -63,6 +61,8 @@ export class LocationMessage extends Component {
 LocationMessage.defaultProps = {
     target: '_blank',
     apiKey: '',
+    zoom: 14,
+    markerColor: 'red',
 }
 
 export default LocationMessage;