show path in custom map

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

Like 1

Like

4 comments

Hi Team,

 

Could anyone help, Please?

Maybe instead of referencing the map when creating the polyline, specifically add it after. After creating the polyline add: 

polyline.setMap(map);

🤷🏼‍♂️

Ryan

Hi Ryan,

 

Thanks for the response. Tried this but still not working.  

Sarika Sharma,

Might have better luck in a forum for the maps api or StackOverflow.

Ryan

Show all comments