[Google Maps Mobile] Open an OutSystems page from a Google Maps marker infowindow

[Google Maps Mobile] Open an OutSystems page from a Google Maps marker infowindow

  
Forge Component
(13)
Published on 11 Oct by Labs
13 votes
Published on 11 Oct by Labs

Hello everyone,

I am currently working on a web application that contains a map with multiple markers. The locations (longitude and latitude) are saved in a database table. The goal is that when I click on a marker, it should display an infowindow which contains high level information of the specific location. Also, the infowindow must have a link that will open a details page of the location. 


I am new in JavaScript programming, and so far I have managed to get the info window working when I click on a marker. Is there a way that I can add a link into the infowindow that will pass the ID of the location and open an OutSystems page? 


I look forward to your suggestions.


Kind regards,

Wallid

Hi!

I think this link can help you. Please, check him and give me a feedback :)


Regards!

Paulo Cação wrote:

Hi!

I think this link can help you. Please, check him and give me a feedback :)


Regards!


Thank you for your reply! I will look into it and let you know if it helps!

Paulo Cação wrote:

Hi!

I think this link can help you. Please, check him and give me a feedback :)


Regards!

Hi Paulo,

I implemented some of the steps from the link you've send me. I've managed to display some database information in the infowindow, but I still need to implement the link within the infowindow to open a new page. I would really appreciate if you can help me out with this one.


Thank you again,

Wallid


Wallid Da Costa Gomez wrote:

Paulo Cação wrote:

Hi!

I think this link can help you. Please, check him and give me a feedback :)


Regards!

Hi Paulo,

I implemented some of the steps from the link you've send me. I've managed to display some database information in the infowindow, but I still need to implement the link within the infowindow to open a new page. I would really appreciate if you can help me out with this one.


Thank you again,

Wallid


Hi Wallid,

Can you share your OML? In your content, you can add link this away:

var contentString = '<div class="maps-info-window-wrapper">'+
                '<div id="bodyContent">'+
                '<p> '+$parameters.Text+'</p>'+
                '<a href='+$parameters.MyLink+'>Click me</a>'+
 '</div>'+
 '</div>';

Attention, I have not tested it, but I think it works that way.

I hope its helps!

Paulo Cação wrote:

Wallid Da Costa Gomez wrote:

Paulo Cação wrote:

Hi!

I think this link can help you. Please, check him and give me a feedback :)


Regards!

Hi Paulo,

I implemented some of the steps from the link you've send me. I've managed to display some database information in the infowindow, but I still need to implement the link within the infowindow to open a new page. I would really appreciate if you can help me out with this one.


Thank you again,

Wallid


Hi Wallid,

Can you share your OML? In your content, you can add link this away:

var contentString = '<div class="maps-info-window-wrapper">'+
                '<div id="bodyContent">'+
                '<p> '+$parameters.Text+'</p>'+
                '<a href='+$parameters.MyLink+'>Click me</a>'+
 '</div>'+
 '</div>';

Attention, I have not tested it, but I think it works that way.

I hope its helps!

Here is the oml I'm currently working on. You can find the marker event in the preparation of the homepage.


Hi,

Your OML are Web and not Mobile (your question is about google maps mobile). I cant test because it gives errors.

Test this:


I hope this help.

Processing Upload...

Paulo Cação wrote:

Hi,

Your OML are Web and not Mobile (your question is about google maps mobile). I cant test because it gives errors.

Test this:


I hope this help.

Sorry about that, I've just seen that I posted it in Google Maps Mobile. I have attached the whole application so that you can test it without any errors.


Hi!

"Processing Upload..."

Did you try to make the change in the code I sent you?

Regards

Paulo Cação wrote:

Hi!

"Processing Upload..."

Did you try to make the change in the code I sent you?

Regards

Yes I have, the infowindow however is not opening when I click it. I think I am missing something.


Hi Wallid,

Try this:

var contentString = 
    '<a href=\'http://www.google.com\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';


Regards

Paulo Cação wrote:

Hi Wallid,

Try this:

var contentString = 
    '<a href=\'http://www.google.com\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';


Regards

This solution is working. I now need to add in the destination Web Page as the destination. I am currently stuck with this one...


Hi,


Create a variable (named VarWithMyLink for example), and assign the variable a link on preparation or where you load de data. And try this:

var contentString = 
    '<a href=\'" + VarWithMyLink + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';

Paulo Cação wrote:

Hi,


Create a variable (named VarWithMyLink for example), and assing the variable a link on preparation or where you load de data. And try this:

var contentString = 
    '<a href=\'" + VarWithMyLink + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';

Yes! Almost there! the only thing that is missing now is to pass the selected identifier to the page!


Hi,

Create a assign like: VarWithMyLink = https://xpto.outsystemscloud.com/OSMDb_pc/MovieDetail.aspx?MovieId=

var contentString = 
    '<a href=\'" + Concat(VarWithMyLink, GetPotholes.List.Current.PotholeNotification.Id) + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';

Paulo Cação wrote:

Hi,

Create a assign like: VarWithMyLink = https://xpto.outsystemscloud.com/OSMDb_pc/MovieDetail.aspx?MovieId=

var contentString = 
    '<a href=\'" + Concat(VarWithMyLink, GetPotholes.List.Current.PotholeNotification.Id) + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"';

I was trying to reply a little earlier but it gave me an "can't submit on the forum" error.. I got it to work! I did it by using the GetEntryURL action for passing all the necessary requirements in the local variable. The local variable in turn is used like the previous solution that you've send and it is working! Thank you so much for your assistance!

One last thing, do you know of a good way that I can display binary data (pictures in this case) into the infowindow?


Solution

Hi,

You need to add img, something like this:

var contentString = 
    '<a href=\'" + Concat(VarWithMyLink, GetPotholes.List.Current.PotholeNotification.Id) + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"<br><img src=\'data:image/" + GetPotholes.List.Current.PotholeNotification.FormateFile + ";base64," + GetPotholes.List.Current.PotholeNotification.BinaryData + "\'> ';

You need getting image url from a binary data, read more here.


Solution

Paulo Cação wrote:

Hi,

You need to add img, something like this:

var contentString = 
    '<a href=\'" + Concat(VarWithMyLink, GetPotholes.List.Current.PotholeNotification.Id) + "\'>Click Me</a> <h3 style=\'margin:0\'>"+GetUser(GetPotholes.List.Current.PotholeNotification.UserId).User.Name+"</h3><br><strong>Address:</strong><br>'"+GetPotholes.List.Current.PotholeNotification.Comment+"<br><img src=\'data:image/" + GetPotholes.List.Current.PotholeNotification.FormateFile + ";base64," + GetPotholes.List.Current.PotholeNotification.BinaryData + "\'> ';

You need getting image url from a binary data, read more here.


Hi Paulo,


The code is working for me. Thank you again! I will mark this thread as solved.