Hi Team,
I'm trying to show the path on a custom embedded map in creatio edit page using the below given code in the edit page of the section for the polyline encoded path. However, it shows no path or coordinates on the map in the edit page. Could anyone help?
Diff Block to insert map in the screen:
{
"operation": "insert",
"name": "GMaps",
"values": {
"itemType": 7,
"id": "googleMap",
"styles": {
"height": "500px"
},
"items": []
},
"parentName": "LeftModulesContainer",
"propertyName": "items",
"index": 2
},
Method
initMap = function() {
var map = new google.maps.Map(document.getElementById('googleMap'), {
center: { lat: 28.4595, lng: 77.0266 },
zoom: 8
});
// Polyline encoded string
var encodedPolyline = "ic`i@ohqfN@A??????????????????????????????????????????????A????????L?HABAH@KEREDEDCJIFEJ??MFMHOHMFIFCF??EBC@ABC@AD@CIFEFCDEDCBCBBCEFC@?@A@A@@CCD?@ABABA@AD@CEFCBA@?@A@CB@AEFEBCDEDEDEF??EFEFGHAFGB@ACFCD?B?BABB?AA@@?AA?????????????????????@A???C@AA??A?@?D??A@?A????????????A@?A??@???A????@@??AA@@A?B?@?@@?A??@?????????????A?@???????????????????????????????A?@?AA??@???????A????@?????A?@?????A?????@A??????????????????????????????????????????????????????????????????????????????????????A?????A@??@AA@??????@@???A?@????????????????????????????????????????????????????????????ACA@??@?????A@?@A????A????ADABCDCDGLEJ??EJEHEJGJEL??ELELCNIJEJ??CJCFCHGHCHEH??EJGLIJMHKH??OHMFMFOFMFMF??KFKFMFOFMDOH??MHKJGJIPOPGH??KFKFG@EHED??GBEHCJGJEHEH??GHAFEBCBCDA??AE@?B?@A@CDAD@C?H???CAA?AA@@?A?A@???????????@?AA?@???????AA?????@?AABA@@?A??A??????????????A??@????@?A@A@CBCFCDGL??EDCDE@ABCF@CEH?DEDC@A?A?@AEHCDEDCLEH??EJEHGJIPGJIL??ELKNIJKLIHEP??EHEFCBADCBAB@CCDC@?@?@?@?AABA@??AA?AAA@@AA?AA???@@AA???????A???@?A?@?????????????A?@?@A?@A???????????????A??@???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????";
// Decode polyline
var decodedPath = google.maps.geometry.encoding.decodePath(encodedPolyline);
// Create a polyline and set its path to the decoded path
var polyline = new google.maps.Polyline({
path: decodedPath,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 20,
map: map
});
};
$.ajax({
url: "https://maps.googleapis.com/maps/api/js?key=APIkeyvalue&callback=initMap&libraries=geometry",
dataType: "script"
});
{
"operation": "insert",
"name": "GMaps",
"values": {
"itemType": 7,
"id": "googleMap",
"styles": {
"height": "500px"
},
"items": []
},
"parentName": "LeftModulesContainer",
"propertyName": "items",
"index": 2
},
Many Thanks,
Sarika
