Hi, I'm using the google maps forge component to draw markers on a map and want to display the infoWindow when a user clicks on a marker. I can get the markers to display, change title, label etc ... but the click event just won't execute.
I've downloaded the demo app but it doesn't work either. Can anyone help?
Thanks
Hi Shane,
the events were added correctly, but the javascript had errors.
I got the following to work, it's roughly what you had, but for the h3 style i used "" instead of \'. Don't ask me to explain, all this quote business with javascript strings in Outsystems can get very confusing very quicly.
" function(){ console.log('marker is clicked !'); this.getMap().setCenter(this.getPosition()); this.getMap().setZoom(12); const contentString = '<h3 style=""margin:0;color:teal;""'>"+CreateTempList.PointOfInterestList.Current.PointOfInterest.Title+"</h3>'+ '<br><strong>Address:</strong><br>" + CreateTempList.PointOfInterestList.Current.PointOfInterest.Address + "<br>'; const infowindow = new google.maps.InfoWindow(); infowindow.setContent(contentString); infowindow.open(this.getMap(), this); } "
and this is result (added the color teal to see if my style was actually applied)
hope this is what you were looking for,
Dorine
Thank you for your help. This is exactly what I wanted. I've been looking at that on/off today and just couldn't see what I was doing wrong.
Thanks again
Shane
how about you share the oml of what you have so far, and I'll take a look
(too lazy to start up a whole new app with maps and markers, sorry)
Hi Dorine,
I've attached an example OML file as you suggested. As you will see it's a very simple example, just 5 markers and my attempt to add an events to display an infoWindow.
Appreciate the help
You can see this component, and more one example .OML in attachment.
Hope It's help.
Regards.
Agno
Thank you for your code. It looks very interesting and useful. I've downloaded the component from the Forge.
But to get the infoWindow to display I had to make the change that Dorine suggested above, note the change of style from \' to "".
Thank you for your help and code
"function() { var contentString = '<h5 style=""margin:0"">"+GetLocations.List.Current.Locations.Description+"</h5><br>'+ '<h6 style=""margin:0"">"+GetLocations.List.Current.Locations.Lat + " " + GetLocations.List.Current.Locations.Long +"</h6><br>'+ '<strong>Address:</strong><br>'+ '"+GetLocations.List.Current.Locations.Address+"<br>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); infowindow.open(this.getMap(), this); }"