Change the Address attribute link to open location in Google Maps

Hello all,
I am trying to change the "Show Address" link or create a new Address attribute to open location in a new Google Maps tab.

So far I have not been able to find how to change the original Address attribute to show different value.

Created a new Address attribute:

View in Google Maps
Address
address == null ?
"<a href=http://www.google.com/maps/place/" + latitude+","+longitude+" target=_blank>View in Google Maps</a>" :
address
String

It works only in the window when checking the syntax, but once linked to a device it is shown as a string of code in the Attributes.
(https://drive.google.com/file/d/17IqshzH7NyeTKkWsBPd6bBINIb181l7F/view?usp=sharing)

I am out of ideas and would appreciate any workarounds.

Thanks for reading it all,
Hristo

You won't be able to do it with computed attributes, if that's what you are trying to achieve.

Hi Anton and thank you for the super fast response.
Ideally I'd like to modify the clickable link of the Address attribute to show the address in a new Google Maps tab/window as a way around the Google's extortionate fees and quotas without the need of geocoding or api.
Creating a Computed Attribute was the first "Lazy Way" idea and hoped for some sort of method to make it work.

I don't think there's any easy way. You just have to go and change the code.

:) I am not a dev, but will do my best to study the code, surely I'll learn something.
Please advise of the most elegant way to approach it. Don't want to disrespect your work.
Currently looking into it and have the following ideas:

1. Directly change the link in the web interface.
2. Try to modify the GoogleGeocoder.java to return the clickable link if there is no API present.
3. Explore the possibility to include it as a configurable parameter in the traccar,conf.
   Thanks again for your time Anton.

Here is what I came up with but still need help to get it work:

Decided to change the failure scenario of onGeocode function in the StateController.js and ReportController.js files.
This way, Google Maps can be used as a fallback and I should be able to control the outcome via the config file if the geocoder is set to true or false .
Looking at StateController.js lines 192 - 216:

onGeocode: function () {
        var positionId = this.position.getId();
        if (!this.position.get('address')) {
            Ext.Ajax.request({
                scope: this,
                method: 'GET',
                url: 'api/server/geocode',
                params: {
                    latitude: this.position.get('latitude'),
                    longitude: this.position.get('longitude')
                },
                success: function (response) {
                    if (this.position && this.position.getId() === positionId) {
                        this.position.set('address', response.responseText);
                        this.updatePosition();
                    }
                },
line 209                failure: function (latitude, longitude) {
line 210                    window.open("https://www.google.com/maps/place/" + latitude + "," + longitude );
                }
            });
        }
    }
});

I changed the lines 209 and 210 as seen in the above example.
It almost works, it opens google maps in new window, but the lat and long parameters appear as so: [object Object],[object Object]
![Screenshot] (https://drive.google.com/file/d/1dL7qVA9sYODmIxuinWrQCSxPoI-lD09V/view?usp=sharing)

Help with the correct syntax and explanation of why is so or more elegant way of implementing this feature will be greatly appreciated.
Again, many thanks for reading, and good weekend to all :)

Hi, Hristo.
Did you find how to do?

@ Serge

Yes, I did it, but of course this is very lame solution very limited by my skills.
As you can see from the example in my previous post, my pre-school level mistake: "this" keyword was missing.
This is what I did:

failure: function () {
                    window.open("https://www.google.com/maps/place/" + this.position.get('latitude') + "," + this.position.get('longitude') );
                }

It works, but only just.

In order for the changes to take effect, do not forget to deploy the test version or make the changes in app.min.js

thanks. I will try too

@Hristo

can you help me make those changes and be able to open the map when I select "Show Address"

to show google map link in Report/Route

i changed in \source\web\app\view\ReportController.js
lines: 466-473

failure: function () {
               var pos1=position.get('latitude');
       var pos2=position.get('longitude');
       resp1='<a href="https://www.google.com/maps/place/' + pos1 + ',' + pos2 + '" target="_blank">' + 'Map Link' + '</a>';
       position.set('address', resp1);
}

Yes, I could do that part but I don't know how to compile to apply the changes, could you help me with a video or steps to do it in windows?