From 0cffc525c5510c46a348bf111784fc49e09dd95f Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Thu, 13 Jun 2019 08:53:26 +0000
Subject: [PATCH] Add bing maps for the job order maps. #221

---
 templates/job-order/bingmaps.js.twig | 103 +++++++++++++++++----------
 1 file changed, 65 insertions(+), 38 deletions(-)

diff --git a/templates/job-order/bingmaps.js.twig b/templates/job-order/bingmaps.js.twig
index d15c2028..7f6c927e 100644
--- a/templates/job-order/bingmaps.js.twig
+++ b/templates/job-order/bingmaps.js.twig
@@ -3,7 +3,13 @@
 
 $(function() {
     var form_in_process = false;
+    var searchManager;
     var pin;
+    var map = new Microsoft.Maps.Map('#m_gmap', {
+        center: new Microsoft.Maps.Location(14.6091, 121.0223),
+        culture: 'fil-Latn';
+    };
+    Microsoft.Maps.Events.addHandler(map, 'click', selectPoint);
 
     function selectPoint(e) {
         if (e.targetType == "map") {
@@ -39,34 +45,41 @@ $(function() {
         $('#map_lng').val(lng);
     }
 
-    var map = new Microsoft.Maps.Map('#m_gmap', {
-        center: new Microsoft.Maps.Location(14.6091, 121.0223),
-    }
-    Microsoft.Maps.Events.addHandler(map, 'click', selectPoint);
+    function geocodeQuery(query) {
+        var searchRequest = {
+            where: query,
+            callback: function (r) {
+                // clear map
+                map.entities.remove(pin);
+                // Add the first result
+                if (r && r.results && r.results.length > 0) {
+                    pin = new Microsoft.Maps.Pushpin(r.results[0].location, {
+                        draggable: false,
+                        icon: '/assets/images/icon-destination.png'
+                    });
+                    map.entities.push(pin);
+                    map.setCenter(location);
 
-
-{
-        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);
+                    // set value in hidden input
+                    $('#map_lat').val(locTemp.latitude);
+                    $('#map_lng').val(locTemp.longitude);
                 }
             },
-            region: 'ph'
-        });
+            errorCallback: function (e) {
+                alert("No results found");
+            }
+        };
+    }
+
+    var handleAction = function() {
+        var text = $.trim($('#m_gmap_address').val());
+        if (!searchManager) {
+            // create an instance of the search manager
+            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() {
+                searchManager = new Microsoft.Maps.Search.SearchManager(map);
+                geocodeQuery(encodeURIComponent(text));
+            });
+        }
     }
 
     $('#m_gmap_btn').click(function(e) {
@@ -84,28 +97,42 @@ $(function() {
 
     {% 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);
+        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.setCenter(location);
+
+        // set value in hidden input
+        $('#map_lat').val(locTemp.latitude);
+        $('#map_lng').val(locTemp.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 GMaps({
-            div: '#hub_map',
-            lat: {{ obj.getCoordinates.getLatitude }},
-            lng: {{ obj.getCoordinates.getLongitude }}
-        });
+        var hmap = new Microsoft.Maps.Map('#hub_map', {
+            center: new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
+                {{ obj.getCoordinates.getLongitude }}),
+            culture: 'fil-Latn';
+        };   
 
-        hmap.addMarker({
-            lat: {{ obj.getCoordinates.getLatitude }},
-            lng: {{ obj.getCoordinates.getLongitude }},
-            icon: '/assets/images/icon-destination.png',
+        var dest = new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
+            {{ obj.getCoordinates.getLongitude }});
+        hmap.entities.push(new Microsoft.Maps.Pushpin(dest, {
             title: "Destination",
-            content: "Destination"
-        });
+            text: "Destination",
+            icon: '/assets/images/icon-destination.png'
+            })
+        );
 
         {% for hub in hubs %}
             hmap.addMarker({