How to create a method for the reuse in two parts ?(typescript, google maps)

Question

I have a google map, and I have a code that displays the information of a marker when it clicks on it, the codes are almost the same, the variables only differ. Example: In the first part, I have displayed 5 markers, click on them and the information is displayed:

marker.addListener('click', () => {
    //create the content
    let markerInfoTemplate = `
        <span class="title">${this.locations[i][0]}</span><br>
        <span class="address">${this.locations[i][3]}</span><br>
        <button class="text-button">
              <a href="${this.locations[i][4]}">Show route</a>
        </button>
    `;
     this.infowindow.setContent(markerInfoTemplate);
     this.infowindow.open(map, marker);

     //change the markers icons
     this.deselectAllMarkers();
           marker.setIcon(this.activeIcon);
     });

the 2nd Code, when looking for ex "catering" and several markers are displayed:

currentMarker.addListener('click', () => {
   //create the content
   let markerInfoTemplate = `
       <span class="title">${place.name}</span><br>
       <span class="address">${place.adr_address}</span><br>
             <button class="text-button">
                <a href="${place.url}">Show route</a>
              </button>
   `;

    this.infowindow.setContent(markerInfoTemplate);
    this.infowindow.open(map, currentMarker);

    //change the markers icons
    this.deselectAllMarkers();
       currentMarker.setIcon(this.activeIcon);
    });

As I said, the code is the same, except the variables. How can I restructure the code so it is not duplicated? Should I do a method? How could I do that?

This part would like to reuse it : let markerInfoTemplate = ` ${place.name}
${place.adr_address}
`; — Stef, Oct 16 '18 at 06:59

Matt McCutchen · Answer 1 · 2018-10-17T02:48:57.553

You can reuse the entire code snippet if you like. Assuming all of this code is in a class, you would define a method like this:

// TODO: Replace `any` with the correct type for a marker.
setupMarkerClickHandler(marker: any, name: string, address: string, url: string) { 
  marker.addListener('click', () => {
    //create the content
    let markerInfoTemplate = `
        <span class="title">${name}</span><br>
        <span class="address">${address}</span><br>
        <button class="text-button">
              <a href="${url}">Show route</a>
        </button>
    `;
    this.infowindow.setContent(markerInfoTemplate);
    // TODO: Replace `map` with another way of referring to the map (maybe save
    // the map in a property of `this`).
    this.infowindow.open(map, marker);

    //change the markers icons
    this.deselectAllMarkers();
    marker.setIcon(this.activeIcon);
  });
}

Then call:

this.setupMarkerClickHandler(marker, this.locations[i][0], this.locations[i][3], this.locations[i][4]);

and:

this.setupMarkerClickHandler(currentMarker, place.name, place.adr_address, place.url);

I notice you're inserting strings into HTML without escaping, which could be a security problem if you don't control the source of those strings. Pick your favorite solution from, e.g., here to escape the strings.

How to create a method for the reuse in two parts ?(typescript, google maps)

1 Answers1