This article shows how to load a map using an iFRAME component on a Freedom UI page, perhaps it will help: https://customerfx.com/article/embedding-an-iframe-on-a-creatio-freedom-ui-page/

Ryan

Hi Jacek,

The "Bubble map" type is available for only the Map chart. We will add this note to the listing description.

Olena Sidko,

Hi Olena,

Thanks for getting back on this. 

The thing is that when I add a new dashboard, I cannot see this 'Map chart' dashboard type. Would you know what could be causing this? 

All the nest in 2025! :-)
Jacek 

Hello! Would anyone have any idea why the 'Map chart' dashboard type is not listed? Thanks!

Jacek Harlejczyk,

Sorry for the delayed reply. The solution is now compatible with all Creatio products. Please install the updated version from the Marketplace and let me know if everything works as expected.

Have a good one!

Olena Sidko,

Thank you for your help. It's working now. 
Best!
Jacek

You look like to be dealing with two different problems. It can be a platform-specific usability or setup problem with the mobile app map user interface. Examine any settings unique to mobile devices and see if the mobile map feature is properly supported. Regarding the Field Sales connector DB error, there can be an oversight or a problem with database compatibility. In addition to making that the connector is compatible with the version of your system, check the logs for detailed problem messages.

Hi Joshua,

We have the requirement to build map functionalities on web and mobile app it is like a (google map) for that we have implemented on web applications using  Field force connector it is working as we expected in web app and same things we configured on the mobile application wizard but we are not able to see the map in mobile as in web app. Please find the snap for the reference for map UI in web app, we are expecting the Open Street Map hyper link in mobile.
 

Prem Kumar,

Hi!

This is not currently available in the mobile app.
You can inspect the Account address detail as an example of integration with OpenStreetMaps in the system and Field Force application as an example of maps functionality on mobile apps. 

And also, 

You can find information in these posts:

https://community.creatio.com/questions/account-address-map-mobile-application

https://community.creatio.com/questions/maps-mobile-application

Best regards,

Anton

Anton Starikov,

Hi Anton,

We have tried above mentioned approaches also but we couldn't get exact UI  as we expected  on mobile app.

We are expecting like a google map in mobile, it is used for delivering the Freight to the customer place. Please help us to achieve this functionalities in mobile.

Thanks,
Prem

Hello,

You can inspect the Account address detail as an example of integration with OpenStreetMaps in the system and Field Force application as an example of maps functionality on mobile apps.

Bogdan,

can you explain more please ?

developer,

You can find information in these posts:

https://community.creatio.com/questions/account-address-map-mobile-appl…

https://community.creatio.com/questions/maps-mobile-application

Bogdan,

these posts are using maps from outside creatio , in my case i want the map view integrated within creatio map 

Hi Luca!
We reviewed the add-on and reproduced the issue on our end. That was an out-of-the-box compilation-related error. When installing the package, the system did not compile and did not generate static content.
We plan to fix this problem in future versions of Creatio. For the time being, I recommend recompiling your system.

Hello Kevin,

Caption is not displayed since once the edit page is reviewed in combined mode then localizable values are being received from the section schema. To resolve this problem you need to:

1) Add the same localizable value to the ContactSectionV2 schema as on the ContactPageV2 schema

2) Add this part of code to the contact page schema:

define("ContactPageV2",["ContactPageV2Resources", "MapsHelper", "MapsUtilities"],

        function(resources, MapsHelper, MapsUtilities){

    return{

        entitySchemaName:"Contact",

        modules:/**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,

        messages: {

            "GetMapsConfig": {

                mode: Terrasoft.MessageMode.PTP,

                direction: Terrasoft.MessageDirectionType.SUBSCRIBE

            }

        },

        businessRules:/**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,

        methods:{

            getActions: function() {

                var actionMenuItems = this.callParent(arguments);

                actionMenuItems.addItem(this.getButtonMenuItem({

                    "Tag": "showOnMap",

                    "Click": {"bindTo": "openShowOnMap"},

                    "Caption": {"bindTo": "Resources.Strings.ShowOnMapCaption"},

                    "Visible": true

                }));

            

                return actionMenuItems;

            },

            showOnMap: function(schemaName, items, callback) {

                var config = config || {};

                items = items || this.getesqedItems();

                var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {

                    rootSchemaName: "ContactAddress"

                });

                esq.addColumn(schemaName + ".Name");

                esq.addColumn("AddressType");

                esq.addColumn("Address");

                esq.addColumn("City");

                esq.addColumn("Region");

                esq.addColumn("Country");

                if(config.columnNameLongitude){

                    esq.addColumn(config.columnNameLongitude);

                }

                if(config.columnNameLatitude){

                    esq.addColumn(config.columnNameLatitude);

                }

                esq.filters.addItem(this.Terrasoft.createColumnInFilterWithParameters(schemaName, items));

                esq.getEntityCollection(function(result) {

                    var addresses = result.collection;

                    if (result.success && !addresses.isEmpty()) {

                        var mapsData = [];

                        var mapsConfig = {

                            mapsData: mapsData

                        };

                        addresses.each(function(item) {

                            var addressType = item.get("AddressType").displayValue;

                            var address = MapsHelper.getFullAddress.call(item);

                            var content = this.Ext.String.format("<h2>{0}</h2><div>{1}</div>", addressType, address);

                            var dataItem = {

                                caption: addressType,

                                content: content,

                                address: address,

                                gpsE: item.get(config.columnNameLongitude),

                                gpsN: item.get(config.columnNameLatitude)

                            };

                            mapsData.push(dataItem);

                        }, this);

                        callback.call(this, mapsConfig);

                    } else {

                        this.showInformationDialog(resources.localizableStrings.EmptyAddressDetailMessage);

                    }

                }, this);

            },

            openShowOnMap: function() {

                var items = [];

                items.push(this.get("Id"));

                this.showOnMap.call(this, this.entitySchemaName, items, function(mapsConfig) {

                    MapsUtilities.open({

                        scope: this,

                        mapsConfig: mapsConfig

                    });

                });

            }

}

3) Add the EmptyAddressDetailMessage localizable string to the ContactPageV2 schema

Best regards,

Oscar

Dear Oscar,

I m trying to display the adresse on the map, but when i do the final step:

callback.call(this, mapsConfig);

i ve got the error:

message: Uncaught Error: Map container is already initialized.

Here's my code :

define("UsrNearestAccountsf7482dd9Page", ["MapsHelper", "MapsUtilities"], function(MapsHelper, MapsUtilities) {
	return {
		entitySchemaName: "UsrNearestAccounts",
		attributes: {},
        messages: {
            "GetMapsConfig": {
                mode: Terrasoft.MessageMode.PTP,
                direction: Terrasoft.MessageDirectionType.SUBSCRIBE
            }
        },
		modules: /**SCHEMA_MODULES*/{
			"Indicator7c02186a-07da-467a-90ed-cf5286772816": {
				"moduleId": "Indicator7c02186a-07da-467a-90ed-cf5286772816",
				"moduleName": "CardWidgetModule",
				"config": {
					"parameters": {
						"viewModelConfig": {
							"widgetKey": "Indicator7c02186a-07da-467a-90ed-cf5286772816",
							"recordId": "cb62f87b-52b6-4482-8283-344ec2f94e1a",
							"primaryColumnValue": {
								"getValueMethod": "getPrimaryColumnValue"
							}
						}
					}
				}
			},
			"Indicator32f96c54-6fbf-45be-b641-95268da60efc": {
				"moduleId": "Indicator32f96c54-6fbf-45be-b641-95268da60efc",
				"moduleName": "CardWidgetModule",
				"config": {
					"parameters": {
						"viewModelConfig": {
							"widgetKey": "Indicator32f96c54-6fbf-45be-b641-95268da60efc",
							"recordId": "cb62f87b-52b6-4482-8283-344ec2f94e1a",
							"primaryColumnValue": {
								"getValueMethod": "getPrimaryColumnValue"
							}
						}
					}
				}
			}
		}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
            getActions: function() {
                var actionMenuItems = this.callParent(arguments);
                actionMenuItems.addItem(this.getButtonMenuItem({
                    "Tag": "showOnMap",
                    "Click": {"bindTo": "openShowOnMap"},
                    "Caption": "openShowOnMap",
                    "Visible": true
                }));
 
                return actionMenuItems;
            },
            openShowOnMap: function() {
                var items = [];
                items.push(this.get("NearAccount"));
                this.showOnMap.call(this, "Account", items, function(mapsConfig) {
                    MapsUtilities.open({
                        scope: this,
                        mapsConfig: mapsConfig
                    });
                });
            },
 
            showOnMap: function(schemaName, items, callback) {
 
                var config = config || {};
                items = items || this.getesqedItems();
 
                var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
                    rootSchemaName: "AccountAddress"
                });
 
                esq.addColumn("AddressType");
                esq.addColumn("Address");
                esq.addColumn("City");
                esq.addColumn("Region");
                esq.addColumn("Country");
                esq.addColumn("GPSE");
                esq.addColumn("GPSN");
 
                esq.filters.addItem(this.Terrasoft.createColumnInFilterWithParameters(schemaName, items));
                esq.getEntityCollection(function(result) {
                    var addresses = result.collection;
                    if (result.success && !addresses.isEmpty()) {
 
                        var mapsData = [];
                        var mapsConfig = {
                            mapsData: mapsData
                        };
 
                        addresses.each(function(item) {
                            this.console.log('item: '+this.print_r(item));
                            var addressType = item.get("AddressType").displayValue;
                            var gpsE = item.get("GPSE");
                            var gpsN = item.get("GPSN");
                            var address = MapsHelper.getFullAddress.call(item);
                            var content = this.Ext.String.format("<h2>{0}</h2><div>{1}</div>", addressType, address);
                            var dataItem = {
                                caption: addressType,
                                content: content,
                                address: address,
                                gpsE: gpsE,
                                gpsN: gpsN
                            };
 
                            this.console.log('dataItem:'+this.print_r(dataItem));
                            mapsData.push(dataItem);
 
                        }, this);
 
                        this.console.log('mapsConfig:'+this.print_r(mapsConfig));
                        callback.call(this, mapsConfig);
 
                    } else {
                        this.showInformationDialog("EmptyAddressDetailMessage");
                    }
                }, this);
            }, 
             print_r: function(obj) { //debug
              let cache = [];
              let str = JSON.stringify(obj, function(key, value) {
                if (typeof value === "object" && value !== null) {
                  if (cache.indexOf(value) !== -1) {
                    // Référence circulaire trouvée
                    return;
                  }
                  // enregistrement de la valeur dans la collection
                  cache.push(value);
                }
                return value;
              });
              cache = null; // reset
              return str;
            }          
        },
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "NearAccountaf54e816-a480-49e1-b827-362d9259418c",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 0,
						"layoutName": "Header"
					},
					"bindTo": "NearAccount"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 0
			},
			{
				"operation": "insert",
				"name": "NearAddress0e195398-6b7e-4bed-81c7-4250803f37dd",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 1,
						"layoutName": "Header"
					},
					"bindTo": "NearAddress"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 1
			},
			{
				"operation": "insert",
				"name": "Distanced9f7c441-62cf-4789-bad3-d9452054b13f",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 2,
						"layoutName": "Header"
					},
					"bindTo": "Distance"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 2
			},
			{
				"operation": "merge",
				"name": "ChangesHistoryTab",
				"values": {
					"order": 0
				}
			},
			{
				"operation": "merge",
				"name": "MapTab",
				"values": {
					"order": 1
				}
			},
			{
				"operation": "merge",
				"name": "ESNTab",
				"values": {
					"order": 2
				}
			}
		]/**SCHEMA_DIFF*/
	};
});

Here is the screenshot:

I retrieve the address and coordinates correctly but I cannot display the marker on the map

Do you have an idea why i ve got this error ?

Thank you,

Nicolas

LÉZORAY Nicolas,

I change BaseModulePageWithMap to BaseModulePageV2 on my object page nad now it works !

thank you !

Dear Ricardo, 

Most likely the issue occurs because the address with the specific ZIP code cannot be found using https://www.openstreetmap.org/ service,  the service our system is integrated with to display maps. 

Our R&D team is aware of this issue and is working on working on implementing a solution for these kinds of cases, however, there is no exact ETA when it will be implemented yet. 

As a workaround, you can create a different ZIP field and store ZIP code there, this way ZIP code wouldn't affect street maps, however, this way it wouldn't be a part of a search for the location in the street maps at all. 

Dear Cristian,

Our system uses the external resource OpenStreetMaps for showing on the map specified addresses. You can check whether the address (or GPS) you specified is on the map at https://www.openstreetmap.org/. If it needed - you can add the address to this resource so that added address will be displayed correctly in OpenStreetMaps and bpm'online.

Best regards,

Anastasia

Anastasia Polo,

Thank you Anastasia for you answer.

So the account address will be shown correctly on mobile application if the OpenStreetMaps is also installed on that mobile device, right? And also if the GPS coordinates are filled for that address the pin on the map will appear?

Dear Cristian Galatan,

It isn't necessary to keep the OpenStreetMaps application installed all the time. Please check whether the address (or GPS) you specified exists and correctly is displayed on the map at https://www.openstreetmap.org/. If there is absent such address - add it. The main idea is - if it is correctly displayed on this map, it will be correctly displayed in the BPMonline.

Best wishes,

Anastasia

Anastasia Polo,

Maybe I didn't asked the right questions. I can see the address correctly on the web application. The pin is also displayed correctly.

The problem is with the mobile application. When I want to see the location on the mobile application, the mobile application ask me what map application I want to use to show me that address. I can choose (google map, waze or any other map application I have installed on that mobile device).

It doesn't open a screen (that maybe is using OpenStreetMaps) to show me the address, like it does on the web application. So is the mobile application not working as intended or do I need to configure the mobile application to do that?

Thank you.

Cristian Galatan,

Sorry for the misunderstanding. To investigate this issue we need more specific information so please submit a case to support@bpmonline.com. Also, specify please the OS version and name of your instance.

Thank you!

Anastasia

How can I map custom City column to be mapped correctly in the Map? I have a requirement to replace the city column with a standard text field as the users are complaining about the finicky data entry of creating lookup values. When creating a city field the MAP API is not working with new field and I would like to know how to fix that.

7.14.3.1686