diff --git a/.env.dist b/.env.dist
index 4c0b202a..eef6592b 100644
--- a/.env.dist
+++ b/.env.dist
@@ -16,6 +16,7 @@ APP_SECRET=b344cd6cd151ae1d61403ed55806c5ce
 DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name
 ###< doctrine/doctrine-bundle ###
 GMAPS_API_KEY=insertgmapsapikeyhere
+BINGMAPS_API_KEY=insertbingmapsapikeyhere
 
 # rising tide sms gateway
 RT_USER=rt_user
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index a11fab53..3b638258 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -4,3 +4,4 @@ twig:
     strict_variables: '%kernel.debug%'
     globals:
         gmaps_api_key: "%env(GMAPS_API_KEY)%"
+        bingmaps_api_key: "%env(BINGMAPS_API_KEY)%"
diff --git a/config/services.yaml b/config/services.yaml
index 8c8024f5..bd81dd79 100644
--- a/config/services.yaml
+++ b/config/services.yaml
@@ -87,6 +87,10 @@ services:
             $password: "%env(REDIS_CLIENT_PASSWORD)%"
             $env_flag: "dev"
 
+    App\Service\BingMapManager: ~
+
+    App\Service\MapManagerInterface: "@App\\Service\\BingMapManager"
+
     Catalyst\APIBundle\Security\APIKeyUserProvider:
         arguments:
             $em: "@doctrine.orm.entity_manager"
diff --git a/src/Controller/GeofenceController.php b/src/Controller/GeofenceController.php
index 48cc5e43..08808352 100644
--- a/src/Controller/GeofenceController.php
+++ b/src/Controller/GeofenceController.php
@@ -6,6 +6,7 @@ use App\Entity\SupportedArea;
 
 use App\Service\KMLFileImporter;
 use App\Service\FileUploader;
+use App\Service\MapManagerInterface;
 
 use Doctrine\ORM\Query;
 use Doctrine\ORM\QueryBuilder;
@@ -25,13 +26,14 @@ class GeofenceController extends Controller
     /**
      * @Menu(selected="geofence_list")
      */
-    public function index()
+    public function index(MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('geofence.list', null, 'No access.');
 
         $params['areas'] = $this->getDoctrine()
                 ->getRepository(SupportedArea::class)
-                ->findAll();;
+                ->findAll();
+        $params['map_manager'] = $map_manager->getMapManager();
 
         return $this->render('geofence/list.html.twig', $params);
     }
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 8e1afedd..05d048fd 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -32,6 +32,7 @@ use App\Service\MapTools;
 use App\Service\HubCounter;
 use App\Service\MQTTClient;
 use App\Service\APNSClient;
+use App\Service\MapManagerInterface;
 
 use Doctrine\ORM\Query;
 use Doctrine\DBAL\Connection;
@@ -206,7 +207,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_in")
      */
-    public function incomingForm()
+    public function incomingForm(MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_in.list', null, 'No access.');
 
@@ -214,6 +215,7 @@ class JobOrderController extends Controller
         $params['mode'] = 'create';
         $params['submit_url'] = $this->generateUrl('jo_in_submit');
         $params['return_url'] = $this->generateUrl('jo_in');
+        $params['map_manager'] = $map_manager->getMapManager(); 
 
         $em = $this->getDoctrine()->getManager();
 
@@ -227,7 +229,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_in")
      */
-    public function openEditForm($id)
+    public function openEditForm($id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_open.edit', null, 'No access.');
 
@@ -240,6 +242,7 @@ class JobOrderController extends Controller
         $params['return_url'] = $this->generateUrl('jo_open');
         $params['cvid'] = $jo->getCustomerVehicle()->getID();
         $params['vid'] = $jo->getCustomerVehicle()->getVehicle()->getID();
+        $params['map_manager'] = $map_manager->getMapManager();
 
         $em = $this->getDoctrine()->getManager();
 
@@ -390,7 +393,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_in")
      */
-    public function incomingVehicleForm($cvid)
+    public function incomingVehicleForm($cvid, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_in.list', null, 'No access.');
 
@@ -398,6 +401,7 @@ class JobOrderController extends Controller
         $params['submit_url'] = $this->generateUrl('jo_in_submit');
         $params['return_url'] = $this->generateUrl('jo_in');
         $params['cvid'] = $cvid;
+        $params['map_manager'] = $map_manager->getMapManager();
 
         $em = $this->getDoctrine()->getManager();
 
@@ -858,7 +862,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_proc")
      */
-    public function processingForm(MapTools $map_tools, $id)
+    public function processingForm(MapTools $map_tools, $id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_proc.list', null, 'No access.');
 
@@ -974,6 +978,7 @@ class JobOrderController extends Controller
         $params['obj'] = $obj;
         $params['submit_url'] = $this->generateUrl('jo_proc_submit', ['id' => $obj->getID()]);
         $params['return_url'] = $this->generateUrl('jo_proc');
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // response
         return $this->render('job-order/form.html.twig', $params);
@@ -1121,7 +1126,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_assign")
      */
-    public function assigningForm(MapTools $map_tools, $id)
+    public function assigningForm(MapTools $map_tools, $id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_assign.list', null, 'No access.');
 
@@ -1195,6 +1200,7 @@ class JobOrderController extends Controller
         $params['status_cancelled'] = JOStatus::CANCELLED;
         $params['submit_url'] = $this->generateUrl('jo_assign_submit', ['id' => $obj->getID()]);
         $params['return_url'] = $this->generateUrl('jo_assign');
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // response
         return $this->render('job-order/form.html.twig', $params);
@@ -1309,7 +1315,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_fulfill")
      */
-    public function fulfillmentForm(MapTools $map_tools, $id)
+    public function fulfillmentForm(MapTools $map_tools, $id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_fulfill.list', null, 'No access.');
 
@@ -1346,6 +1352,7 @@ class JobOrderController extends Controller
         $params['status_cancelled'] = JOStatus::CANCELLED;
         $params['submit_url'] = $this->generateUrl('jo_fulfill_submit', ['id' => $obj->getID()]);
         $params['return_url'] = $this->generateUrl('jo_fulfill');
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // response
         return $this->render('job-order/form.html.twig', $params);
@@ -1528,7 +1535,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_open")
      */
-    public function openHubForm(MapTools $map_tools, $id)
+    public function openHubForm(MapTools $map_tools, $id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_open.list', null, 'No access.');
 
@@ -1606,6 +1613,7 @@ class JobOrderController extends Controller
         $params['obj'] = $obj;
         $params['submit_url'] = $this->generateUrl('jo_open_hub_submit', ['id' => $obj->getID()]);
         $params['return_url'] = $this->generateUrl('jo_open');
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // response
         return $this->render('job-order/form.html.twig', $params);
@@ -1718,7 +1726,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_open")
      */
-    public function openRiderForm($id)
+    public function openRiderForm($id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_open.list', null, 'No access.');
 
@@ -1750,6 +1758,7 @@ class JobOrderController extends Controller
         $params['status_cancelled'] = JOStatus::CANCELLED;
         $params['submit_url'] = $this->generateUrl('jo_open_rider_submit', ['id' => $obj->getID()]);
         $params['return_url'] = $this->generateUrl('jo_open');
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // response
         return $this->render('job-order/form.html.twig', $params);
@@ -1862,7 +1871,7 @@ class JobOrderController extends Controller
     /**
      * @Menu(selected="jo_all")
      */
-    public function allForm($id)
+    public function allForm($id, MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('jo_all.list', null, 'No access.');
 
@@ -1884,6 +1893,7 @@ class JobOrderController extends Controller
         $params['status_cancelled'] = JOStatus::CANCELLED;
         $params['return_url'] = $this->generateUrl('jo_all');
         $params['submit_url'] = '';
+        $params['map_manager'] = $map_manager->getMapManager();
 
         // timeline stuff (descending by time)
         $params['timeline'] = [
diff --git a/src/Service/BingMapManager.php b/src/Service/BingMapManager.php
new file mode 100644
index 00000000..6320a406
--- /dev/null
+++ b/src/Service/BingMapManager.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Service;
+
+class BingMapManager implements MapManagerInterface
+{
+    const MANAGER = 'bing';
+
+    public function getMapManager()
+    {
+        return self::MANAGER;
+    }
+}
diff --git a/src/Service/GoogleMapManager.php b/src/Service/GoogleMapManager.php
new file mode 100644
index 00000000..55250dce
--- /dev/null
+++ b/src/Service/GoogleMapManager.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Service;
+
+class GoogleMapManager implements MapManagerInterface
+{
+    const MANAGER = 'google';
+
+    public function getMapManager()
+    {
+        return self::MANAGER;   
+    }   
+}
diff --git a/src/Service/MapManagerInterface.php b/src/Service/MapManagerInterface.php
new file mode 100644
index 00000000..c37eba9e
--- /dev/null
+++ b/src/Service/MapManagerInterface.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Service;
+
+interface MapManagerInterface
+{
+
+    public function getMapManager();
+
+    //public function jsJobOrderDetails();
+
+    //public function jsOutlet();
+
+    //public function jsHub();
+}
diff --git a/templates/geofence/bingmaps.js.twig b/templates/geofence/bingmaps.js.twig
new file mode 100644
index 00000000..248432e5
--- /dev/null
+++ b/templates/geofence/bingmaps.js.twig
@@ -0,0 +1,35 @@
+<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key|raw }}' async defer></script>
+<script>
+
+var polygons = new Array();
+
+function GetMap()
+{
+    var map = new Microsoft.Maps.Map('#m_geomap', {
+        center: new Microsoft.Maps.Location(14.6091, 121.0223),
+        mapTypeId: Microsoft.Maps.MapTypeId.road,
+        zoom: 13
+    });
+
+    {% if areas %}
+        {% for obj in areas %}
+            var pointsArray = new Array();
+
+            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
+                var polylatlng = new Microsoft.Maps.Location(
+                    {{ point.getLatitude }},
+                    {{ point.getLongitude }});
+
+                pointsArray.push(polylatlng);
+            {% endfor %}
+
+            var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {
+                fillColor: "#FF0000"
+            });
+            map.entities.push(coveredarea);
+
+            polygons[{{ obj.getID}}] = coveredarea;
+
+        {% endfor %}
+    {% endif %}
+}
diff --git a/templates/geofence/googlemaps.js.twig b/templates/geofence/googlemaps.js.twig
new file mode 100644
index 00000000..e54a6db0
--- /dev/null
+++ b/templates/geofence/googlemaps.js.twig
@@ -0,0 +1,42 @@
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key|raw }}" type="text/javascript"></script>
+<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
+
+<script>
+
+var polygons = new Array();
+
+initMap(); 
+
+function initMap() {
+    var map = new google.maps.Map(document.getElementById('m_geomap'),
+    {
+        center: {lat: 14.6091, lng: 121.0223},
+        mapTypeId: 'roadmap',
+        zoom: 13 
+    });
+
+    {% if areas %}
+        {% for obj in areas %}
+            var pointsArray = new Array();
+
+            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
+                var polylatlng = new google.maps.LatLng(
+                    {{ point.getLatitude }},
+                    {{ point.getLongitude }});
+
+                pointsArray.push(polylatlng);
+            {% endfor %}
+
+            var coveredarea = new google.maps.Polygon({
+                paths: pointsArray,
+                fillColor: "#FF0000",
+                fillOpacity: .5,
+                mapTypeId: 'roadmap'
+            });
+            coveredarea.setMap(map);
+
+            polygons[{{ obj.getID}}] = coveredarea;
+
+        {% endfor %}
+    {% endif %}
+}
diff --git a/templates/geofence/list.html.twig b/templates/geofence/list.html.twig
index 1b9598bc..1b8e9b12 100644
--- a/templates/geofence/list.html.twig
+++ b/templates/geofence/list.html.twig
@@ -39,7 +39,7 @@
                         <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <div class="col-lg-12">
-                                   <div id="m_gmap" style="height:600px;"></div>
+                                   <div id="m_geomap" style="height:600px;"></div>
                                </div>
                            </div>
                            <div id = "area-rows" class="form-group m-form__group row">
@@ -83,51 +83,11 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
-<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
-
-<script>
-// BEGIN google maps stuff
-
-var polygons = new Array();
-
-initMap();
-
-function initMap() {
-    var map = new google.maps.Map(document.getElementById('m_gmap'),
-    {
-        center: {lat: 14.6091, lng: 121.0223},
-        mapTypeId: 'roadmap',
-        zoom: 13 
-    });
-
-    {% if areas %}
-        {% for obj in areas %}
-            var pointsArray = new Array();
-
-            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
-                var polylatlng = new google.maps.LatLng(
-                    {{ point.getLatitude }},
-                    {{ point.getLongitude }});
-
-                pointsArray.push(polylatlng);
-            {% endfor %}
-
-            var coveredarea = new google.maps.Polygon({
-                paths: pointsArray,
-                fillColor: "#FF0000",
-                fillOpacity: .5,
-                mapTypeId: 'roadmap'
-            });
-            coveredarea.setMap(map);
-
-            polygons[{{ obj.getID}}] = coveredarea;
-
-        {% endfor %}
-    {% endif %}
-}
-
-// END google maps stuff
+{% if map_manager == 'bing' %}
+    {{ include ('geofence/bingmaps.js.twig')}}
+{% else %}
+    {{ include ('geofence/googlemaps.js.twig')}}
+{% endif %}
 
 $('tr td').click(function(e) {
     e.preventDefault();
diff --git a/templates/job-order/bingmaps.js.twig b/templates/job-order/bingmaps.js.twig
new file mode 100644
index 00000000..139a5a6c
--- /dev/null
+++ b/templates/job-order/bingmaps.js.twig
@@ -0,0 +1,145 @@
+<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key|raw }}' async defer></script>
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key|raw }}" type="text/javascript"></script>
+<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
+
+<script>
+
+var form_in_process = false;
+var pin;
+var map;
+
+function GetMap()
+{
+    map = new Microsoft.Maps.Map('#m_gmap', {
+        center: new Microsoft.Maps.Location(14.6091, 121.0223),
+        culture: 'fil-Latn',
+        zoom: 13
+    });
+
+    Microsoft.Maps.Events.addHandler(map, 'click', selectPoint);
+
+    function selectPoint(e) {
+        if (e.targetType == "map") {
+            var point = new Microsoft.Maps.Point(e.getX(), e.getY());
+            var locTemp = e.target.tryPixelToLocation(point);
+            var location = new Microsoft.Maps.Location(locTemp.latitude,
+                locTemp.longitude)
+
+            map.entities.remove(pin);
+
+            pin = new Microsoft.Maps.Pushpin(location, {
+                draggable: false,
+                icon: '/assets/images/icon-destination.png'
+            });
+
+            map.entities.push(pin);
+            map.setView({
+                center: location
+            });
+            
+            // set value in hidden input
+            $('#map_lat').val(locTemp.latitude);
+            $('#map_lng').val(locTemp.longitude);
+        }
+    }
+};
+
+$(function() {
+
+    var handleAction = function() {
+        var text = $.trim($('#m_gmap_address').val());
+        GMaps.geocode({
+            address: text,
+            callback: function(results, status) {
+                map.entities.clear();
+                if (status == 'OK') {
+                    var location = results[0].geometry.location;
+                    var lat = location.lat();
+                    var lng = location.lng();
+
+                    // show in map
+                    var loc = new Microsoft.Maps.Location(lat, lng);
+                    pin = new Microsoft.Maps.Pushpin(loc, {
+                        draggable: false,
+                        icon: '/assets/images/icon-destination.png'
+                    });
+
+                    map.entities.push(pin);
+                    map.setView({
+                        center: loc
+                    });
+
+                    // set value in hidden input
+                    $('#map_lat').val(lat);
+                    $('#map_lng').val(lng);
+                }
+            },
+        });
+    };
+
+    $('#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();
+        }
+    });
+
+
+    {% if ftags.set_map_coordinate %}
+        // check if we need to set map
+        var location = new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
+
+        map.entities.remove(pin);
+
+        pin = new Microsoft.Maps.Pushpin(location, {
+            draggable: false,
+            icon: '/assets/images/icon-destination.png'
+        });
+
+        map.entities.push(pin);
+        map.setView({
+            center: location
+        });
+
+        // set value in hidden input
+        $('#map_lat').val(location.latitude);
+        $('#map_lng').val(location.longitude);
+        
+        // remove placeholder text
+        $("[data-vehicle-field='1']").prop('placeholder', '');
+    {% endif %}
+
+    {% if mode in ['update-processing', 'update-reassign-hub'] %}
+        // display hub map
+        var hmap = new Microsoft.Maps.Map('#hub_map', {
+            center: new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
+                {{ obj.getCoordinates.getLongitude }}),
+            culture: 'fil-Latn'
+        });   
+
+        var dest = new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
+            {{ obj.getCoordinates.getLongitude }});
+        hmap.entities.push(new Microsoft.Maps.Pushpin(dest, {
+            title: "Destination",
+            text: "Destination",
+            icon: '/assets/images/icon-destination.png'
+            })
+        );
+
+        {% for hub in hubs %}
+            var hub_dest = new Microsoft.Maps.Location({{ hub.hub.getCoordinates.getLatitude }},
+                {{ hub.hub.getCoordinates.getLongitude }});
+            hmap.entities.push(new Microsoft.Maps.Pushpin(hub_dest, {
+                title: "{{ hub.hub.getName }}",
+                text: "{{ hub.hub.getName }}",
+                icon: '/assets/images/icon-outlet.png'
+                })
+            );
+        {% endfor %}
+    {% endif %}
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index 1d3e0275..76f4d898 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -893,109 +893,11 @@
 {% endblock %}
 
 {% block scripts %}
-<!-- <script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script> -->
-<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
-<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
-
-<script>
-$(function() {
-    var form_in_process = false;
-
-	// BEGIN google maps stuff
-	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,
-	        icon: '/assets/images/icon-destination.png'
-	    });
-
-	    // 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();
-	    }
-	});
-
-    {% if ftags.set_map_coordinate %}
-		// check if we need to set map
-	    var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
-	    selectPoint(map, latlng);
-
-	    // remove placeholder text
-	    $("[data-vehicle-field='1']").prop('placeholder', '');
-    {% endif %}
-
-    {% if mode in ['update-processing', 'update-reassign-hub'] %}
-        // display hub map
-        var hmap = new GMaps({
-            div: '#hub_map',
-            lat: {{ obj.getCoordinates.getLatitude }},
-            lng: {{ obj.getCoordinates.getLongitude }}
-        });
-
-        hmap.addMarker({
-            lat: {{ obj.getCoordinates.getLatitude }},
-            lng: {{ obj.getCoordinates.getLongitude }},
-            icon: '/assets/images/icon-destination.png',
-            title: "Destination",
-            content: "Destination"
-        });
-
-        {% for hub in hubs %}
-            hmap.addMarker({
-                lat: {{ hub.hub.getCoordinates.getLatitude }},
-                lng: {{ hub.hub.getCoordinates.getLongitude }},
-                title: "{{ hub.hub.getName }}",
-                content: "{{ hub.hub.getName }}",
-	        	icon: '/assets/images/icon-outlet.png'
-            });
-        {% endfor %}
-
-    {% endif %}
-
-
-	// END google maps stuff
+{% if map_manager == 'bing' %}
+    {{ include ('job-order/bingmaps.js.twig')}}
+{% else %}
+    {{ include ('job-order/googlemaps.js.twig')}}
+{% endif %}
 
 	$("#row-form").submit(function(e) {
         if (form_in_process) {
diff --git a/templates/job-order/googlemaps.js.twig b/templates/job-order/googlemaps.js.twig
new file mode 100644
index 00000000..78f57647
--- /dev/null
+++ b/templates/job-order/googlemaps.js.twig
@@ -0,0 +1,100 @@
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key|raw }}" type="text/javascript"></script>
+<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
+
+<script>
+
+$(function() {
+    var form_in_process = false;
+
+    // BEGIN google maps stuff
+    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,
+            icon: '/assets/images/icon-destination.png'
+        });
+
+        // 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();
+        }
+    });
+
+    {% if ftags.set_map_coordinate %}
+        // check if we need to set map
+        var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
+        selectPoint(map, latlng);
+
+        // remove placeholder text
+        $("[data-vehicle-field='1']").prop('placeholder', '');
+    {% endif %}
+
+    {% if mode in ['update-processing', 'update-reassign-hub'] %}
+        // display hub map
+        var hmap = new GMaps({
+            div: '#hub_map',
+            lat: {{ obj.getCoordinates.getLatitude }},
+            lng: {{ obj.getCoordinates.getLongitude }}
+        });
+
+        hmap.addMarker({
+            lat: {{ obj.getCoordinates.getLatitude }},
+            lng: {{ obj.getCoordinates.getLongitude }},
+            icon: '/assets/images/icon-destination.png',
+            title: "Destination",
+            content: "Destination"
+        });
+
+        {% for hub in hubs %}
+            hmap.addMarker({
+                lat: {{ hub.hub.getCoordinates.getLatitude }},
+                lng: {{ hub.hub.getCoordinates.getLongitude }},
+                title: "{{ hub.hub.getName }}",
+                content: "{{ hub.hub.getName }}",
+                        icon: '/assets/images/icon-outlet.png'
+            });
+        {% endfor %}
+
+    {% endif %}