[Google Maps] Google maps marker click event
Forge component by Labs
Application Type
Traditional Web

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

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

Hi 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


Shane 

Locations.oml

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

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

mvp_badge
MVP

Hi Shane,

You can see this component, and more one example .OML in attachment.

Hope It's help.

Regards.

MarkerInfowindow.oml

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

Shane 

"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);
}"
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.