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],
})
}
}