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
4 comments
23:29 Feb 29, 2024
Maybe instead of referencing the map when creating the polyline, specifically add it after. After creating the polyline add:
polyline.setMap(map);
🤷🏼♂️
Ryan
21:23 Mar 03, 2024
Hi Ryan,
Thanks for the response. Tried this but still not working.
18:55 Mar 04, 2024
Sarika Sharma,
Might have better luck in a forum for the maps api or StackOverflow.
Ryan
Show all comments