diff --git a/Block/Adminhtml/System/Coordinate.php b/Block/Adminhtml/System/Coordinate.php
new file mode 100644
index 0000000..0ede093
--- /dev/null
+++ b/Block/Adminhtml/System/Coordinate.php
@@ -0,0 +1,78 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Block\Adminhtml\System;
+
+use Magento\Backend\Block\Template\Context;
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+use Mageplaza\GoogleMaps\Helper\Data;
+
+/**
+ * Class Coordinate
+ * @package Mageplaza\GoogleMaps\Block\Adminhtml\System
+ */
+class Coordinate extends Field
+{
+    /**
+     * Template path
+     *
+     * @var string
+     */
+    protected $_template = 'system/config/coordinate.phtml';
+
+    /**
+     * @var Data
+     */
+    public $helperData;
+
+    /**
+     * Coordinate constructor.
+     *
+     * @param Context $context
+     * @param Data $helperData
+     * @param array $data
+     */
+    public function __construct(
+        Context $context,
+        Data $helperData,
+        array $data = []
+    )
+    {
+        $this->helperData = $helperData;
+
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Render fieldset html
+     *
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
+     *
+     * @return string
+     */
+    public function render(AbstractElement $element)
+    {
+        $this->setElement($element);
+
+        return $this->_decorateRowHtml($element, $this->toHtml());
+    }
+}
diff --git a/Block/Map.php b/Block/Map.php
new file mode 100644
index 0000000..bdecf76
--- /dev/null
+++ b/Block/Map.php
@@ -0,0 +1,162 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Block;
+
+use Magento\Framework\View\Element\Template;
+use Magento\Framework\View\Element\Template\Context;
+use Magento\Widget\Block\BlockInterface;
+use Mageplaza\GoogleMaps\Helper\Data;
+
+/**
+ * Class Map
+ * @package Mageplaza\GoogleMaps\Block
+ */
+class Map extends Template implements BlockInterface
+{
+    /**
+     * @var string
+     */
+    protected $_template = 'Mageplaza_GoogleMaps::map.phtml';
+
+    /**
+     * @var Data
+     */
+    public $helperData;
+
+    /**
+     * Map constructor.
+     *
+     * @param Context $context
+     * @param Data $helperData
+     * @param array $data
+     */
+    public function __construct(
+        Context $context,
+        Data $helperData,
+        array $data = []
+    )
+    {
+        $this->helperData = $helperData;
+
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Get map API key from system config
+     *
+     * @return mixed
+     */
+    public function getMapApi()
+    {
+        return $this->helperData->getMapConfig('api_key');
+    }
+
+    /**
+     * Get map Latitude from system config
+     *
+     * @return mixed
+     */
+    public function getMapLatitude()
+    {
+        return $this->helperData->getMapConfig('location_setting/latitude');
+    }
+
+    /**
+     * Get map Longitude from system config
+     *
+     * @return mixed
+     */
+    public function getMapLongitude()
+    {
+        return $this->helperData->getMapConfig('location_setting/longitude');
+    }
+
+    /**
+     * Get map Marker Icon Url from system config
+     *
+     * @return bool|string
+     */
+    public function getMapMarkerIcon()
+    {
+        return $this->helperData->getMarkerUrl();
+    }
+
+    /**
+     * Get map Zoom default value from system config
+     *
+     * @return int
+     */
+    public function getMapZoomDefault()
+    {
+        return ((int) $this->helperData->getMapConfig('zoom_default')) ?: 20;
+    }
+
+    /**
+     * Get map Type from system config
+     *
+     * @return string
+     */
+    public function getMapTypeId()
+    {
+        return ($this->helperData->getMapConfig('map_type')) ?: 'roadmap';
+    }
+
+    /**
+     * Is draggable map from system config
+     *
+     * @return mixed
+     */
+    public function isMapDraggable()
+    {
+        return $this->helperData->getMapConfig('allow_drag');
+    }
+
+    /**
+     * Get map Protocol from system config
+     *
+     * @return mixed
+     */
+    public function getProtocol()
+    {
+        return $this->helperData->getMapConfig('protocol');
+    }
+
+    /**
+     * Get map Embed code from system config
+     *
+     * @return mixed
+     */
+    public function getEmbedCode()
+    {
+        return $this->helperData->getMapConfig('embed_code');
+    }
+
+    /**
+     * @return false|string
+     */
+    public function getMapTemplate()
+    {
+        $mapStyle = $this->helperData->getMapConfig('map_style');
+
+        return json_encode($this->helperData->getMapTheme($mapStyle));
+    }
+}
diff --git a/Helper/Data.php b/Helper/Data.php
new file mode 100644
index 0000000..096dffc
--- /dev/null
+++ b/Helper/Data.php
@@ -0,0 +1,109 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Helper;
+
+use Magento\Framework\App\Helper\Context;
+use Magento\Framework\ObjectManagerInterface;
+use Magento\Store\Model\StoreManagerInterface;
+use Mageplaza\Core\Helper\AbstractData;
+use Mageplaza\GoogleMaps\Model\Config\Source\System\MapStyle;
+
+/**
+ * Class Data
+ * @package Mageplaza\GoogleMaps\Helper
+ */
+class Data extends AbstractData
+{
+    const CONFIG_MODULE_PATH = 'mpgooglemaps';
+
+    /**
+     * @var MapStyle
+     */
+    protected $_mapStyleData;
+
+    /**
+     * @var Image
+     */
+    protected $_helperImage;
+
+    /**
+     * Data constructor.
+     *
+     * @param Context $context
+     * @param ObjectManagerInterface $objectManager
+     * @param StoreManagerInterface $storeManager
+     * @param Image $helperImage
+     * @param MapStyle $mapStyleData
+     */
+    public function __construct(
+        Context $context,
+        ObjectManagerInterface $objectManager,
+        StoreManagerInterface $storeManager,
+        Image $helperImage,
+        MapStyle $mapStyleData
+    )
+    {
+        $this->_helperImage  = $helperImage;
+        $this->_mapStyleData = $mapStyleData;
+
+        parent::__construct($context, $objectManager, $storeManager);
+    }
+
+    /**
+     * Get map settings system config
+     *
+     * @param $code
+     * @param null $storeId
+     *
+     * @return mixed
+     */
+    public function getMapConfig($code, $storeId = null)
+    {
+        $code = ($code !== '') ? '/' . $code : '';
+
+        return $this->getModuleConfig('map_setting' . $code, $storeId);
+    }
+
+    /**
+     * Get custom marker icon Url
+     *
+     * @return bool|string
+     */
+    public function getMarkerUrl()
+    {
+        if ($this->getMapConfig('marker_icon')) {
+            return $this->_helperImage->getBaseMediaUrl() . '/' . $this->_helperImage->getMediaPath($this->getMapConfig('marker_icon'), 'marker_icon');
+        } else {
+            return '';
+        }
+    }
+
+    /**
+     * @param $styleName
+     *
+     * @return string
+     */
+    public function getMapTheme($styleName)
+    {
+        return $this->_mapStyleData->getMapData($styleName);
+    }
+}
\ No newline at end of file
diff --git a/Helper/Image.php b/Helper/Image.php
new file mode 100644
index 0000000..764d5d7
--- /dev/null
+++ b/Helper/Image.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Helper;
+
+use Mageplaza\Core\Helper\Media;
+
+/**
+ * Class Image
+ * @package Mageplaza\GoogleMaps\Helper
+ */
+class Image extends Media
+{
+    const TEMPLATE_MEDIA_PATH = 'mageplaza/google_maps';
+}
diff --git a/Model/Config/Backend/Image.php b/Model/Config/Backend/Image.php
new file mode 100644
index 0000000..31c6e25
--- /dev/null
+++ b/Model/Config/Backend/Image.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Model\Config\Backend;
+
+use Magento\Config\Model\Config\Backend\File;
+
+/**
+ * Class Image
+ * @package Mageplaza\GoogleMaps\Model\Config\Backend
+ */
+class Image extends File
+{
+    /**
+     * @inheritdoc
+     */
+    protected function _getAllowedExtensions()
+    {
+        return ['svg', 'jpg', 'jpeg', 'gif', 'png'];
+    }
+}
diff --git a/Model/Config/Source/System/MapStyle.php b/Model/Config/Source/System/MapStyle.php
new file mode 100644
index 0000000..3f2043e
--- /dev/null
+++ b/Model/Config/Source/System/MapStyle.php
@@ -0,0 +1,102 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Model\Config\Source\System;
+
+use Magento\Framework\Option\ArrayInterface;
+
+/**
+ * Class MapStyle
+ * @package Mageplaza\GoogleMaps\Model\Config\Source\System
+ */
+class MapStyle implements ArrayInterface
+{
+    const STYLE_DEFAULT          = 'default';
+    const STYLE_BLUE_ESSENCE     = 'blue-essence';
+    const STYLE_DARK_GREEN       = 'dark-green';
+    const STYLE_DARK_GREY        = 'dark-grey';
+    const STYLE_DESERT           = 'desert';
+    const STYLE_LIGHT_BLUE_WATER = 'light-blue-water';
+    const STYLE_LIGHT_DREAM      = 'light-dream';
+    const STYLE_LIGHT_GREY       = 'light-grey';
+    const STYLE_MID_NIGHT        = 'mid-night';
+    const STYLE_NATURE_COLOR     = 'nature-color';
+
+    CONST MAP_DATA = [
+        self::STYLE_DEFAULT          => '[]',
+        self::STYLE_BLUE_ESSENCE     => '[{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]',
+        self::STYLE_DARK_GREEN       => '[{"featureType":"all","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"},{"saturation":"-100"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40},{"visibility":"off"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},{"featureType":"landscape","elementType":"geometry.stroke","stylers":[{"color":"#4d6059"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"lightness":21}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"color":"#4d6059"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#7f8d89"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#2b3638"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2b3638"},{"lightness":17}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#24282b"}]},{"featureType":"water","elementType":"geometry.stroke","stylers":[{"color":"#24282b"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.icon","stylers":[{"visibility":"off"}]}]',
+        self::STYLE_DARK_GREY        => '[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]',
+        self::STYLE_DESERT           => '[{"elementType":"labels","stylers":[{"visibility":"off"},{"color":"#f49f53"}]},{"featureType":"landscape","stylers":[{"color":"#f9ddc5"},{"lightness":-7}]},{"featureType":"road","stylers":[{"color":"#813033"},{"lightness":43}]},{"featureType":"poi.business","stylers":[{"color":"#645c20"},{"lightness":38}]},{"featureType":"water","stylers":[{"color":"#1994bf"},{"saturation":-69},{"gamma":0.99},{"lightness":43}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#f19f53"},{"weight":1.3},{"visibility":"on"},{"lightness":16}]},{"featureType":"poi.business"},{"featureType":"poi.park","stylers":[{"color":"#645c20"},{"lightness":39}]},{"featureType":"poi.school","stylers":[{"color":"#a95521"},{"lightness":35}]},{},{"featureType":"poi.medical","elementType":"geometry.fill","stylers":[{"color":"#813033"},{"lightness":38},{"visibility":"off"}]},{},{},{},{},{},{},{},{},{},{},{},{"elementType":"labels"},{"featureType":"poi.sports_complex","stylers":[{"color":"#9e5916"},{"lightness":32}]},{},{"featureType":"poi.government","stylers":[{"color":"#9e5916"},{"lightness":46}]},{"featureType":"transit.station","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","stylers":[{"color":"#813033"},{"lightness":22}]},{"featureType":"transit","stylers":[{"lightness":38}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#f19f53"},{"lightness":-10}]},{},{},{}]',
+        self::STYLE_LIGHT_BLUE_WATER => '[{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]',
+        self::STYLE_LIGHT_DREAM      => '[{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]',
+        self::STYLE_LIGHT_GREY       => '[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]',
+        self::STYLE_MID_NIGHT        => '[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]',
+        self::STYLE_NATURE_COLOR     => '[{"featureType":"landscape","stylers":[{"hue":"#FFA800"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#53FF00"},{"saturation":-73},{"lightness":40},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FBFF00"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#00FFFD"},{"saturation":0},{"lightness":30},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00BFFF"},{"saturation":6},{"lightness":8},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#679714"},{"saturation":33.4},{"lightness":-25.4},{"gamma":1}]}]'
+    ];
+
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $options = [];
+        foreach ($this->toArray() as $value => $label) {
+            $options[] = [
+                'value' => $value,
+                'label' => $label
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [
+            self::STYLE_DEFAULT          => __('Default'),
+            self::STYLE_BLUE_ESSENCE     => __('Blue Essence'),
+            self::STYLE_DARK_GREEN       => __('Dark Green'),
+            self::STYLE_DARK_GREY        => __('Dark Grey'),
+            self::STYLE_DESERT           => __('Desert'),
+            self::STYLE_LIGHT_BLUE_WATER => __('Light Blue Water'),
+            self::STYLE_LIGHT_DREAM      => __('Light Dream'),
+            self::STYLE_LIGHT_GREY       => __('Light Grey'),
+            self::STYLE_MID_NIGHT        => __('Mid Night'),
+            self::STYLE_NATURE_COLOR     => __('Nature Color')
+        ];
+    }
+
+    /**
+     * @param $style
+     *
+     * @return mixed
+     */
+    public function getMapData($style)
+    {
+        return self::MAP_DATA[$style];
+    }
+}
diff --git a/Model/Config/Source/System/MapType.php b/Model/Config/Source/System/MapType.php
new file mode 100644
index 0000000..6cd4673
--- /dev/null
+++ b/Model/Config/Source/System/MapType.php
@@ -0,0 +1,67 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Model\Config\Source\System;
+
+use Magento\Framework\Option\ArrayInterface;
+
+/**
+ * Class MapType
+ * @package Mageplaza\GoogleMaps\Model\Config\Source\System
+ */
+class MapType implements ArrayInterface
+{
+    const TYPE_ROAD_MAP  = 'roadmap';
+    const TYPE_TERRAIN   = 'terrain';
+    const TYPE_SATELLITE = 'satellite';
+    const TYPE_HYBRID    = 'hybrid';
+
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $options = [];
+        foreach ($this->toArray() as $value => $label) {
+            $options[] = [
+                'value' => $value,
+                'label' => $label
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [
+            self::TYPE_ROAD_MAP  => __('Roadmap'),
+            self::TYPE_TERRAIN   => __('Terrain'),
+            self::TYPE_SATELLITE => __('Satellite'),
+            self::TYPE_HYBRID    => __('Hybrid')
+        ];
+    }
+}
diff --git a/Model/Config/Source/System/Position.php b/Model/Config/Source/System/Position.php
new file mode 100644
index 0000000..4509a8c
--- /dev/null
+++ b/Model/Config/Source/System/Position.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Model\Config\Source\System;
+
+use Magento\Framework\Option\ArrayInterface;
+
+/**
+ * Class Position
+ * @package Mageplaza\GoogleMaps\Model\Config\Source\System
+ */
+class Position implements ArrayInterface
+{
+    const POSITION_TOP    = 'top';
+    const POSITION_BOTTOM = 'bottom';
+
+
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $options = [];
+        foreach ($this->toArray() as $value => $label) {
+            $options[] = [
+                'value' => $value,
+                'label' => $label
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [self::POSITION_TOP => __('Top'), self::POSITION_BOTTOM => __('Bottom')];
+    }
+}
diff --git a/Model/Config/Source/System/Protocol.php b/Model/Config/Source/System/Protocol.php
new file mode 100644
index 0000000..67aa16f
--- /dev/null
+++ b/Model/Config/Source/System/Protocol.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+namespace Mageplaza\GoogleMaps\Model\Config\Source\System;
+
+use Magento\Framework\Option\ArrayInterface;
+
+/**
+ * Class Protocol
+ * @package Mageplaza\GoogleMaps\Model\Config\Source\System
+ */
+class Protocol implements ArrayInterface
+{
+    const API        = 1;
+    const EMBED_CODE = 2;
+
+
+    /**
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        $options = [];
+        foreach ($this->toArray() as $value => $label) {
+            $options[] = [
+                'value' => $value,
+                'label' => $label
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return [self::API => __('API'), self::EMBED_CODE => __('Embed Code')];
+    }
+}
diff --git a/etc/acl.xml b/etc/acl.xml
new file mode 100644
index 0000000..9b41c35
--- /dev/null
+++ b/etc/acl.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="Mageplaza_GoogleMaps::configuration" title="Mageplaza GoogleMaps"/>
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
diff --git a/etc/adminhtml/menu.xml b/etc/adminhtml/menu.xml
new file mode 100644
index 0000000..b68033e
--- /dev/null
+++ b/etc/adminhtml/menu.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
+    <menu>
+        <add id="Mageplaza_GoogleMaps::googlemaps" title="Google Maps" module="Mageplaza_GoogleMaps" sortOrder="110" resource="Mageplaza_GoogleMaps::googlemaps" parent="Magento_Backend::content"/>
+        <add id="Mageplaza_GoogleMaps::configuration" title="Configuration" module="Mageplaza_GoogleMaps" sortOrder="1000" action="adminhtml/system_config/edit/section/mpgooglemaps" resource="Mageplaza_GoogleMaps::configuration" parent="Mageplaza_GoogleMaps::googlemaps"/>
+    </menu>
+</config>
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
new file mode 100644
index 0000000..8a56437
--- /dev/null
+++ b/etc/adminhtml/system.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <section id="mpgooglemaps" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Google Maps</label>
+            <tab>mageplaza</tab>
+            <resource>Mageplaza_GoogleMaps::configuration</resource>
+            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General</label>
+                <field id="enabled" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment><![CDATA[Select <b>Yes</b> to enable this module]]></comment>
+                </field>
+                <field id="contact_page" translate="label comment" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Insert on Contact Page</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="position" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Position</label>
+                    <source_model>Mageplaza\GoogleMaps\Model\Config\Source\System\Position</source_model>
+                    <depends>
+                        <field id="contact_page">1</field>
+                    </depends>
+                </field>
+            </group>
+            <group id="map_setting" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Map Settings</label>
+                <field id="protocol" translate="label comment" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Protocol</label>
+                    <source_model>Mageplaza\GoogleMaps\Model\Config\Source\System\Protocol</source_model>
+                </field>
+                <field id="api_key" translate="label comment" type="text" sortOrder="20" showInWebsite="1" showInStore="1" showInDefault="1">
+                    <label>Google API Key</label>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                    <comment><![CDATA[Get Google Map API <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank">here</a>.]]></comment>
+                </field>
+                <field id="map_type" translate="label comment" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Map Type</label>
+                    <source_model>Mageplaza\GoogleMaps\Model\Config\Source\System\MapType</source_model>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                </field>
+                <field id="map_style" translate="label comment" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Map Style</label>
+                    <source_model>Mageplaza\GoogleMaps\Model\Config\Source\System\MapStyle</source_model>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                </field>
+                <field id="allow_drag" translate="label comment" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Allow Map Dragging</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                    <comment><![CDATA[Select <b>Yes</b> to allow dragging the map.]]></comment>
+                </field>
+                <field id="zoom_default" translate="label comment" type="text" sortOrder="60" showInWebsite="1" showInStore="1" showInDefault="1">
+                    <label>Zoom Default</label>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                    <comment><![CDATA[Default zoom when loading the map.]]></comment>
+                </field>
+                <field id="marker_icon" translate="label comment" type="image" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Marker Icon</label>
+                    <backend_model>Mageplaza\GoogleMaps\Model\Config\Backend\Image</backend_model>
+                    <upload_dir config="system/filesystem/media" scope_info="1">mageplaza/google_maps/marker_icon</upload_dir>
+                    <base_url type="media" scope_info="1">mageplaza/google_maps/marker_icon</base_url>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                    <comment><![CDATA[This icon is shown on the map. 20x20 px is recommended, <a href="https://www.flaticon.com/search?word=map%20marker" target="_blank">sample icons</a>.]]></comment>
+                </field>
+                <field id="embed_code" translate="label" type="textarea" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Code</label>
+                    <depends>
+                        <field id="protocol">2</field>
+                    </depends>
+                </field>
+                <group id="location_setting" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Location Settings</label>
+                    <depends>
+                        <field id="protocol">1</field>
+                    </depends>
+                    <field id="address" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Address</label>
+                    </field>
+                    <field id="gps_coordinates" translate="label" type="label" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>GPS Coordinates</label>
+                        <depends>
+                            <field id="protocol">1</field>
+                        </depends>
+                        <frontend_model>Mageplaza\GoogleMaps\Block\Adminhtml\System\Coordinate</frontend_model>
+                    </field>
+                    <field id="latitude" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Latitude</label>
+                        <validate>required-entry</validate>
+                    </field>
+                    <field id="longitude" translate="label" type="text" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Longitude</label>
+                        <validate>required-entry</validate>
+                    </field>
+                </group>
+            </group>
+        </section>
+    </system>
+</config>
diff --git a/etc/config.xml b/etc/config.xml
new file mode 100644
index 0000000..6f9692f
--- /dev/null
+++ b/etc/config.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
+    <default>
+        <mpgooglemaps>
+            <general>
+                <enabled>1</enabled>
+                <contact_page>1</contact_page>
+                <position>1</position>
+            </general>
+            <map_setting>
+                <protocol>1</protocol>
+                <allow_drag>0</allow_drag>
+                <zoom_default>20</zoom_default>
+            </map_setting>
+        </mpgooglemaps>
+    </default>
+</config>
diff --git a/etc/widget.xml b/etc/widget.xml
new file mode 100644
index 0000000..fd79289
--- /dev/null
+++ b/etc/widget.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
+    <widget id="mageplaza_googlemaps_map" class="Mageplaza\GoogleMaps\Block\Map">
+        <label translate="true">Mageplaza Google Maps</label>
+        <description translate="true">Mageplaza Google Maps Widget</description>
+        <parameters>
+            <parameter name="template" xsi:type="select" required="true" visible="true">
+                <label translate="true">Template</label>
+                <options>
+                    <option name="map" value="Mageplaza_GoogleMaps::map.phtml" selected="true">
+                        <label translate="true">Google Map Template</label>
+                    </option>
+                </options>
+            </parameter>
+        </parameters>
+        <containers>
+            <container name="content">
+                <template name="map" value="map"/>
+            </container>
+        </containers>
+    </widget>
+</widgets>
\ No newline at end of file
diff --git a/view/adminhtml/templates/system/config/coordinate.phtml b/view/adminhtml/templates/system/config/coordinate.phtml
new file mode 100644
index 0000000..0248351
--- /dev/null
+++ b/view/adminhtml/templates/system/config/coordinate.phtml
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+/** @var \Mageplaza\GoogleMaps\Block\Adminhtml\System\Coordinate $block */
+$mapApi  = $block->helperData->getMapConfig('api_key');
+$address = $block->helperData->getMapConfig('location_setting/address');
+$btnId   = $block->getElement()->getId();
+?>
+<td id="coordinate-button-label" class="label">
+    <label for="<?php echo $btnId; ?>_button"></label>
+</td>
+<td id="coordinate-button-value" class="value">
+    <button style="margin-bottom: 15px;" id="<?php echo $btnId; ?>_button"
+            title="<?php echo __("Get GPS coordinates"); ?>"
+            type="button" class="primary"
+            role="button" aria-disabled="false">
+        <span class="ui-button-text">
+            <span><?php echo __("Get GPS coordinates"); ?></span>
+        </span>
+    </button>
+    <div class="mpmessage"></div>
+</td>
+<script>
+    require([
+        'jquery',
+        'mage/translate',
+        "https://maps.googleapis.com/maps/api/js?key=<?php echo $mapApi ?>"
+    ], function($, $t) {
+        var buttonCoordinate = $('#<?php echo $btnId; ?>_button');
+        var message          = $('#coordinate-button-value .mpmessage');
+        var addressEl        = $('input#mpgooglemaps_map_setting_location_setting_address');
+        buttonCoordinate.on('click', function() {
+            $.ajax({
+                url: 'https://maps.googleapis.com/maps/api/geocode/json',
+                type: 'GET',
+                data: {
+                    "address": addressEl.val(),
+                    "key": '<?php echo $mapApi ?>'
+                },
+                beforeSend: function() {
+                    buttonCoordinate.text($t('Loading...'));
+                },
+                success: function(response) {
+                    switch (response.status){
+                        case 'OK':
+                            var latitude  = response.results[0].geometry.location.lat,
+                                longitude = response.results[0].geometry.location.lng;
+                            $('input#mpgooglemaps_map_setting_location_setting_latitude').val(latitude);
+                            $('input#mpgooglemaps_map_setting_location_setting_longitude').val(longitude);
+                            break;
+                        case 'OVER_DAILY_LIMIT':
+                            message.html(getMessageHtml($t('API Key is incorrect or The provided method of payment is no longer valid. See the <a href="https://developers.google.com/maps/faq#over-limit-key-error">Map FAQ</a> to learn how to fix this')));
+                            break;
+                        case 'OVER_QUERY_LIMIT':
+                            message.html(getMessageHtml($t('Your quota has been exceeded')));
+                            break;
+                        case 'ZERO_RESULTS':
+                            message.html(getMessageHtml($t('The address could not be found. Please make sure you enter the real one.')));
+                            break;
+                        case 'REQUEST_DENIED':
+                            message.html(getMessageHtml($t('The request has been denied.')));
+                            break;
+                        case 'INVALID_REQUEST':
+                            message.html(getMessageHtml($t('The query (address, components or latitude/longitude) is missing.')));
+                            break;
+                        default: //UNKNOWN_ERROR
+                            message.html(getMessageHtml($t('The request could not be processed due to a server error. Please try again.')));
+                            break;
+                    }
+                },
+                error: function(error) {
+                    var errorText = error.responseText || $t('Something went wrong, please try again later');
+                    message.html(getMessageHtml(errorText));
+                },
+                complete: function() {
+                    buttonCoordinate.text($t('Get GPS coordinates'));
+                }
+            })
+        });
+
+        /**
+         * Get html message text
+         *
+         * @param messageText
+         * @returns {string}
+         */
+        function getMessageHtml(messageText) {
+            return '<div class="messages">' +
+                '<div class="message message-error error">' +
+                '<div data-ui-id="magento-framework-view-element-messages-0-message-error">' +
+                messageText +
+                '</div>' +
+                '</div>' +
+                '</div>';
+        }
+    });
+</script>
diff --git a/view/frontend/layout/contact_index_index.xml b/view/frontend/layout/contact_index_index.xml
new file mode 100644
index 0000000..e9d1475
--- /dev/null
+++ b/view/frontend/layout/contact_index_index.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="main">
+            <block class="Magento\Framework\View\Element\Template" name="mp.googlemaps.map.top" before="-" template="Mageplaza_GoogleMaps::map/position.phtml" ifconfig="googlemaps/general/enabled">
+                <arguments>
+                    <argument name="position" xsi:type="string">top</argument>
+                </arguments>
+            </block>
+            <block class="Magento\Framework\View\Element\Template" name="mp.googlemaps.map.bottom" after="-" template="Mageplaza_GoogleMaps::map/position.phtml" ifconfig="googlemaps/general/enabled">
+                <arguments>
+                    <argument name="position" xsi:type="string">bottom</argument>
+                </arguments>
+            </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/view/frontend/templates/map.phtml b/view/frontend/templates/map.phtml
new file mode 100644
index 0000000..64bf430
--- /dev/null
+++ b/view/frontend/templates/map.phtml
@@ -0,0 +1,69 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+/** @var \Mageplaza\GoogleMaps\Block\Map $block */
+?>
+<?php if ($block->getProtocol() == Mageplaza\GoogleMaps\Model\Config\Source\System\Protocol::API): ?>
+    <div class="mpgooglemaps_review_map">
+        <div class="mpgooglemaps_map" id="mpgooglemaps_map_<?php echo $block->getNameInLayout() ?>"
+             style="height: 550px;width: 100%;margin: 15px 0;">
+        </div>
+    </div>
+    <script>
+        require([
+            "https://maps.googleapis.com/maps/api/js?key=<?php echo $block->getMapApi() ?>"
+        ], function() {
+            var latitude       = '<?php echo $block->getMapLatitude() ?>',
+                longitude      = '<?php echo $block->getMapLongitude() ?>';
+            var isDraggable    = <?php echo $block->isMapDraggable() ?>;
+            var mapStyle       = JSON.parse(<?php echo $block->getMapTemplate()?>);
+            var mapZoomDefault = <?php echo $block->getMapZoomDefault() ?>;
+            var mapTypeId      = '<?php echo $block->getMapTypeId() ?>';
+            var mapMarkerIcon  = '<?php echo $block->getMapMarkerIcon() ?>';
+
+            function markerMap(latitude, longitude) {
+                var mapLatLng  = new google.maps.LatLng(latitude, longitude);
+                var mapOptions = {
+                    draggable: !!(parseInt(isDraggable)),
+                    zoom: mapZoomDefault,
+                    center: mapLatLng,
+                    mapTypeId: mapTypeId,
+                    styles: mapStyle
+                };
+
+                var map    = new google.maps.Map(document.getElementById("mpgooglemaps_map_<?php echo $block->getNameInLayout() ?>"), mapOptions);
+                var marker = new google.maps.Marker({
+                    draggable: !!(parseInt(isDraggable)),
+                    position: mapLatLng,
+                    icon: mapMarkerIcon,
+                    animation: google.maps.Animation.DROP
+                });
+                marker.setMap(map);
+            }
+
+            markerMap(latitude, longitude);
+        });
+    </script>
+<?php else: ?>
+    <div class="mpgooglemaps_review_map" style="float: left;width: 100%;margin: 15px 0;">
+        <?php echo $block->getEmbedCode(); ?>
+    </div>
+<?php endif; ?>
\ No newline at end of file
diff --git a/view/frontend/templates/map/position.phtml b/view/frontend/templates/map/position.phtml
new file mode 100644
index 0000000..4a834d9
--- /dev/null
+++ b/view/frontend/templates/map/position.phtml
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Mageplaza
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Mageplaza.com license that is
+ * available through the world-wide-web at this URL:
+ * https://www.mageplaza.com/LICENSE.txt
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade this extension to newer
+ * version in the future.
+ *
+ * @category    Mageplaza
+ * @package     Mageplaza_GoogleMaps
+ * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
+ * @license     https://www.mageplaza.com/LICENSE.txt
+ */
+
+/** @var \Mageplaza\GoogleMaps\Helper\Data $helperData */
+/** @var \Magento\Framework\View\Element\Template $block */
+$helperData = $this->helper('Mageplaza\GoogleMaps\Helper\Data');
+$position   = $helperData->getConfigGeneral('position');
+if ($helperData->getConfigGeneral('contact_page') && $position == $block->getData('position')):
+    echo $block->getLayout()->createBlock('Mageplaza\GoogleMaps\Block\Map')->toHtml();
+endif;