Google Map Mobile on marker click 

Google Map Mobile on marker click 

  

Hi 


I'm new with outsystem maybe anyone can help me how to add a marker click event for google map mobile .

Don Jayson Agra wrote:

Hi 


I'm new with outsystem maybe anyone can help me how to add a marker click event for google map mobile .

Hi Don,

You need to have a local variable of the type "MarkEventIdentifier List", which you bind to the map block.

So basically, you should do the append of the desired event to that list.

Then, bind your variables to the GMaps component:


And for last, you need to add an eventListener to the map block, for the event "MapMarkerRaisedEvent".


And that's pretty much it, hope it helps.


Hey, Don,

Like Henrique mentioned, it should be as simple as adding the wanted events to the MarkerEvents input parameter list. You can check out the attached OAP for a simple example for "click" events.

Please let us know if it worked for you!   

Best regards,

Carlos Simões

PS: Could you post the question on the component's forums next time, so we catch this earlier, please?

Hi Carlos

Thank you for the nice example oap. It helped me get my map working to a certain degree.

What i couldn't get to work is adding InfoWindows that show data from the database when a Marker is clicked.

In the GetData data action in your sample how would you add InfoWindows to the Markers? The MarkerEvent Record doesn't have a Handler property.

Thank you.

Fabian

Fabian wrote:

Hi Carlos

Thank you for the nice example oap. It helped me get my map working to a certain degree.

What i couldn't get to work is adding InfoWindows that show data from the database when a Marker is clicked.

In the GetData data action in your sample how would you add InfoWindows to the Markers? The MarkerEvent Record doesn't have a Handler property.

Thank you.

Fabian


Hi Fabian,

About the infowindows it's a bit more tricky, but here it goes:

On the action that is binded to the MapMarkerRaisedEvent you should add the following js

(I attached the image also but it doesn't seem to be working. You can right click on the above image and download, then add .png to the name and it should work)

So basically you're creating a new infowindow everytime the marker is clicked, though the MapId and MapMarker parameters. Then, you need to have an output parameter that will save the infowindow object to a local screen variable. 

This variable is needed so you don't open a multiple windows on the map. So this local variable needs to be passed to that js node so you can close the infowindow if there's one already rendered.

To ease the understanding, here it goes what's inside the js node:

var map = osGoogleMap.OSMaps[ $parameters.MapId ].gMap;
var marker = osGoogleMap.OSMaps[ $parameters.MapId ].markers[ $parameters.MarkerId ].gMarker;

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

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

if( $parameters.InfoWindowObj === undefined || $parameters.InfoWindowObj === null) {
    $parameters.OutputObj = infowindow;
}
else {
    $parameters.InfoWindowObj.close();
    $parameters.OutputObj = infowindow;
}

infowindow.open(map, marker);


Please let me know if you need any further detail or an .oml example.

Hope it helps,

Henrique

Hi Henrique

Thank you very much for helping me. I can display a infowindows now but I still have an issue. Maybe it's simple so sorry if it is...I have to display information from the database for each of these infowindows. e.g. when the user clicks on the marker i want to show some information about the event at that location. I don't have that information in the MapMarkerRaisedEvent. So i thought i have to add the infowindow to the markers in my Data action where i have access to the data. However i don't see a way to do that. Where could i store the db info for each marker so it's available in the MapMarkerRaisedEvent and then display the proper info for the clicked marker?

Thank you.

Fabian


Please keep in mind that the infowindow is built with html only.

You have many possibilities to do that, but i think the following is the simplest one:

  •  On the js node that you open the infowindow you should add others input parameters that fit your use case. I.e Text
  • When you're passing the information to that input please try something like this:
    The thing is the MapMarkerEvent returns the index of the marker where the event occurred, so you can access your data by that index, like on the example above (see input parameter "Text").
  • Then inside your js node you can customize the infowindow like on the below example:

Let me know if it worked.

Cheers

Hi Henrique

Took me a while. I hope i did it right. It seems to work. 

I created a custom structure that contains a google Map Marker and the attributes i want to show in the infowindow. I then assign the html i want to display in the infowindow inside the MapMarkerRaisedEvent to a local variable. like this.

SyntaxEditor Code Snippet

"<div id=""content"">"+
            "<h2 id=""firstHeading"" class=""firstHeading"">"+ GetData.MapMarkers[MarkerListIndex].TroubleType.Label +"</h2>" +
            "<div id=""bodyContent"">"+
            "<p>" + GetData.MapMarkers[MarkerListIndex].TroubleDescription + etc. etc.

I pass this local variable to the JavaScript AddMarkerInfoWindow and display it like this

var contentString = $parameters.InfoWindowContent;

Thank you for your help!

Fabian

Oops i just realized i kind of took over this post. I wanted to mark your post as the solution but it's not my post.

Should i create a new post and you can answer there again and get the credit?

No problem, i'm not interested on the credit, but thanks anyway :D

I'm glad it  worked :D