Hi, how can I add advanced options to a marker.
For example, I want to set a class, a color and change the fontFamily of the marker label.
Best Regards,
Diogo
Hello @Diogo Barata,
Thank you for the feedback, and you are right! Right now we don't have the event OnInitialize available for the Marker which would make it much easier to "Subscribe" the handlers to the Markers. We will keep the suggestion in mind for future releases as we are always trying to improve the component.
I tried to recreate what you were asking and I believe I have a solution for you. Can you try the solution on the sample attached to this answer?
We are now using an OutSystems Block that will include the Marker Block and inside the OnReady of that OS Block you will have all the necessary code to change the Label of the Markers in runtime. I'm simulating changes on the Database (list that feeds the Markers) with a button that increments the number of Max records from the GetOffices Aggregate.
Again, please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases.
Best regards,
Tiago Pereira
Hi @Prathamesh Pitale
In the oml you shared you have two things that are not quite correct:
var markerId = document.querySelector("#"+$parameters.MarkerId).querySelector(".ss-marker").getAttribute("name"); OutSystems.Maps.MapAPI.MarkerManager.Events.Subscribe( markerId, OSFramework.Maps.Event.Marker.MarkerEventType.Initialized, // This function is a callback, will only be invoked when the marker has been initialized () => { //Define the label styling object const styleObj = { text: OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById(markerId).provider.label, color: "red", fontSize: "15px", className: "marker-label" }; //Set the label customizations OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById(markerId).provider.setLabel(styleObj); } );
I made some customizations on the CSS class to make it visible:
I hope it helps!
Cheers,GM
The OutSystems Maps component doesn't have such property to allow the developers to add the advanced options you are asking just by setting the values on the configuration of the Marker. Nevertheless, I prepared a workaround that I hope and believe will work for you.
On the sample attached you will find 2 different screens. One is for a single marker or if you have a set of marker blocks on the map and you know the id of them. The second screen is used for a list of markers (when you don't know the id of the blocks).
Currently, the component only has the possibility to add a handler to the initialization of the Map. Therefore, we need to hardcode with Javascript blocks in order to create or recreate the same logic that is being used by the Map, but this time for the Markers themself:
1) Create a new handler for the Map Initialization.
2) Add the following code into a JS block:
MapAPI.MarkerManager.Events.Subscribe(
$parameters.markerId,
OSFramework.Event.Marker.MarkerEventType.Initialized,
// This function is a callback, will only be invoked when the marker has been initialized
// (has both the OutSystems Object and the GoogleMaps Marker Object created)
function(){$actions.ChangeMarkerLabel($parameters.markerId)}
);
3) As you can see, we were calling a ChangeMarkerLabel action on the previous code. So you will need to add a new client action that will have the MarkerId as an input parameter.
4) Inside the ChangeMarkerLabel action you will need to add the second JS block, this time to change the label style:
var marker = MapAPI.MarkerManager.GetMarkerById($parameters.markerId);
marker.provider.label && marker.changeProperty('label',{
text: marker.provider.label, // Use the same text that was pre-configured.
color: "red",
fontSize: "15px",
className: 'marker-label'// Google adds more styles. Some of those css configurations might override your css properties.
});
.marker-label { background-color:#ccccccaa; }
Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases. We are continuously working to provide more events and API methods, so I suggest you keep tuned.
Can you please check if the current sample attached to this answer meets all your needs?
Hi Tiago Miguel Pereira ,
I thanks for the help.
I understood what you've made and it works like a charm.
But that method only works when you first Initialize the map. In my scenario I'm constantly removing and adding markers according to what the user selects on a form, therefore I need what you've implemented but to be triggered OnMarkersList change or something like that because the Map Initialize doesn't trigger when there is a change on the map.
For now, I can achieve my goal by using the DEPRECATED_Markers input of the map, but since it's Deprecated I would like to avoid it.
Can you help?
Thanks for the help. That workaround worked perfectly.
Diogo Barata
Hi @Tiago Miguel Pereira ,
I am looking for the same implementation, I tired the oml you have attached MarkerOptionalConfigsV2 but I am getting an error 'Cannot read properties of undefined (reading 'Marker') 'once the screen is loaded. And sometimes the map is also not loading.
Please find attached screenshot of the same.
I know this is a old post, but could you please help me solving this issue
Prathamesh Pitale
I just tested Tiago's oml and everything is working as expected.Can you share your oml and describe the steps to reproduce that?
Hi @Gonçalo Martins
I have used the same code as there in MarkerOptionalConfigsV2.oml
Please find attached oml file.
Hi @Gonçalo Martins,
Thank you for the help, it works great. I was facing a issue because of the api key.
Could you please help me in one more thing? I want to change the color of that Marker also, which is red currently, and can we make different marker with different color.
The app I am developing has a map which show office and the customers, I want to show the offices in red color and the customers in blue color.
About the icon, it is an image so you can't simply change its color, but you have an input parameter exactly to pass a different icon URL:
For these simpler topics, please check the Maps sample first where you have some examples about that (can be also installed from Forge).
Got it, Thank you @Gonçalo Martins
Hi Gonçalo, After updating the component in our environment to version 2.0.0, it looks like something broke with the setLabel function as it no longer exists, at least in the provider method.When running the app:
Is there any other way we can reach the setLabel?
Hi @Fábio Rodrigues
Those are Google APIs so you need to check the documentation, that's not part of OutSystems Maps code. In the API everything after provider. is to access Google Maps APIs so, if you're using the new advanced markers (a big change done by Google) you'll need to find if there's a way to achieve the same use case (like is mentioned in the release notes where you can also get the link to here). Probably this page has some useful examples.
Alternatively, you can continue to use legacy Markers (UseAdvancedMarkers = false) until Google decides to remove them (more risky decision since we can't control it).