0

I'm dropping markers onto google map in JavaScript. The linter cries about

Do not use 'new' for side effects.

After reading through this and this Stack Overflow post I see why this is the case. In my code I am looping over a list with my restaurants and here I get above error.

I literally copied the code from documentation, which reads:

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

My question is: how do I do it properly so the reference to the new object is not thrown away and my code is, simply speaking, correct? (My code follows)

 init(): void {
    const { map } = setupMap(this, this.oslo.lat, this.oslo.lng)
    this.setMarkers(map)
  }

  setMarkers(map: google.maps.Map) {
    for (let i = 0; i < this.providerList.length; i++) {
      const marker = this.providerList[i]

      new google.maps.Marker({ // error on this line
        position: { lat: marker.latitude, lng: marker.longitude },
        map,
        title: marker.name,
        // zIndex: marker[i],
      })
    }
  }
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
mlvrkhn
  • 87
  • 1
  • 12

1 Answers1

3

Depending on your linter settings, just claiming "I know what I'm doing" with the void keyword should do:

new google.maps.Marker({...})

to

void new google.maps.Marker({...})

should signify your intent to ignore the return value.

AKX
  • 152,115
  • 15
  • 115
  • 172
  • this actually puts me onto another ESLint error: "Expected 'undefined' and instead saw 'void'. eslintno-void". – mlvrkhn Nov 10 '21 at 22:19
  • 1
    Well, then you'll probably need to tweak those ESlint settings in one way or another. – AKX Nov 11 '21 at 05:58