diff --git a/config/routes.yaml b/config/routes.yaml
index 4f74a5b1..24f33349 100644
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -91,5 +91,9 @@ role_delete:
 # test
 
 test_acl:
-    path: /test_acl
+    path: /test/acl
     controller: App\Controller\TestController::index
+
+test_gmap:
+    path: /test/gmap
+    controller: App\Controller\TestController::gmap
diff --git a/src/Controller/TestController.php b/src/Controller/TestController.php
index b195035a..70b44760 100644
--- a/src/Controller/TestController.php
+++ b/src/Controller/TestController.php
@@ -25,4 +25,11 @@ class TestController extends BaseController
 
         return $this->render('home.html.twig', $params);
     }
+
+    public function gmap()
+    {
+        $params = $this->initParameters('home');
+
+        return $this->render('test/map.html.twig', $params);
+    }
 }
diff --git a/templates/test/map.html.twig b/templates/test/map.html.twig
new file mode 100644
index 00000000..32685347
--- /dev/null
+++ b/templates/test/map.html.twig
@@ -0,0 +1,113 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                Test Map
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+                <div class="m-portlet m-portlet--tab">
+                    <div class="m-portlet__head">
+                        <div class="m-portlet__head-caption">
+                            <div class="m-portlet__head-title">
+                                <span class="m-portlet__head-icon m--hide">
+                                    <i class="la la-gear"></i>
+                                </span>
+                                <h3 class="m-portlet__head-text">
+                                    Input Customer Location
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="m-portlet__body">
+                        <form class="form-inline margin-bottom-10" action="#">
+                            <input type="hidden" id="map_lat" name="latitude" value="">
+                            <input type="hidden" id="map_lng" name="longitude" value="">
+                            <div class="input-group">
+                                <input type="text" class="form-control" id="m_gmap_address" placeholder="Search">
+                                <span class="input-group-btn">
+                                    <button class="btn btn-primary" id="m_gmap_btn">
+                                        <i class="fa fa-search"></i>
+                                    </button>
+                                </span>
+                            </div>
+                        </form>
+                        <div id="m_gmap" style="height:800px;"></div>
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="//maps.google.com/maps/api/js?key=AIzaSyBbXDzw9kDx1hPvR3M8xdQihuioEUm_h7k" type="text/javascript"></script>
+<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
+<script>
+
+function selectPoint(map, latlng) {
+    var lat = latlng.lat();
+    var lng = latlng.lng();
+
+    // show it in map
+    map.removeMarkers();
+    map.setCenter(lat, lng);
+    map.addMarker({
+        lat: lat,
+        lng: lng
+    });
+
+    // set value in hidden input
+    $('#map_lat').val(lat);
+    $('#map_lng').val(lng);
+}
+
+var map = new GMaps({
+    div: '#m_gmap',
+    lat: 14.6091,
+    lng: 121.0223,
+    click: function(e) {
+        // handle click in map
+        selectPoint(map, e.latLng);
+        e.stop();
+    }
+});
+var handleAction = function() {
+    var text = $.trim($('#m_gmap_address').val());
+    GMaps.geocode({
+        address: text,
+        callback: function(results, status) {
+            map.removeMarkers();
+            if (status == 'OK') {
+                selectPoint(map, results[0].geometry.location);
+            }
+        },
+        region: 'ph'
+    });
+}
+
+$('#m_gmap_btn').click(function(e) {
+    e.preventDefault();
+    handleAction();
+});
+
+$("#m_gmap_address").keypress(function(e) {
+    var keycode = (e.keyCode ? e.keyCode : e.which);
+    if (keycode == '13') {
+        e.preventDefault();
+        handleAction();
+    }
+});
+
+</script>
+{% endblock %}