How to pass arguments to addEventListener for google maps Polygon listener function in addition to the event?

Question

I want to send other parameters for this function in addition to the event. This is to display the information sent to the function in the pop-up when the plugins are clicked. How can I do this?

var bermudaTriangle = new google.maps.Polygon({
                        paths: triangleCoords,
                        strokeColor: "#fd7e14",
                        strokeOpacity: 0.8,
                        strokeWeight: 3,
                        fillColor: "rgba(253,126,20,0.62)",
                        fillOpacity: 0.35
                    });

bermudaTriangle.setMap(map);
area_info = {"name" : "1", "shipping_cost" : 100}

bermudaTriangle.addListener("click", showArrays);
infoWindow = new google.maps.InfoWindow();

function showArrays(event, area) {
        let contentString =
            '<div class="form-group pr-2 pl-2">' +
            '<div class="text-dark">name:</div>' +
            area.name +
            '<br>'+
            '<div class="text-dark">shipping_cost :</div>' +
            area.shipping_cost +
            '$'+
            '<br></div>'
        ;

        // Replace the info window's content and position.
        infoWindow.setContent(contentString);
        infoWindow.setPosition(event.latLng);
        infoWindow.open(map);
    }

When I send information in bermudaTriangle.addListener("click", showArrays(area_info) ) form to a function, I do not know how to send the event. And when I call the function like this bermudaTriangle.addListener("click", showArrays(bermudaTriangle, area_info) ), the event does not work properly. I try this but it still did not work out.

bermudaTriangle.addListener("click", showArrays);
bermudaTriangle.area = area_info;

and showArrays:

function showArrays(event, area) {
    let contentString =
        '<div class="form-group pr-2 pl-2">' +
        '<div class="text-dark">name:</div>' +
        event.currentTarget.name +
        '<br>'+
        '<div class="text-dark">shipping_cost :</div>' +
        event.currentTarget.shipping_cost +
        '$'+
        '<br></div>'
    ;

    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
}

`bermudaTriangle.addListener("click", event => showArrays(event, area_info));` — Musa, Oct 01 '21 at 18:28

Guerric P · Accepted Answer · 2021-10-01T18:32:54.433

The Polygon's click event listener takes only one parameter. That means the library passes no more than one parameter when it calls the function.

If the information you need is not attached to the event object, you have to retrieve it by other means.

If you need to pass the parameters yourself, you can write a higher order function:

function showArrays(area) {
  return function (event) {
    let contentString =
      '<div class="form-group pr-2 pl-2">' +
      '<div class="text-dark">name:</div>' +
      area.name +
      "<br>" +
      '<div class="text-dark">shipping_cost :</div>' +
      area.shipping_cost +
      "$" +
      "<br></div>";
    // Replace the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  };
}

bermudaTriangle.addListener("click", showArrays(area));

How to pass arguments to addEventListener for google maps Polygon listener function in addition to the event?

1 Answers1