1

I am using google maps with my angular application in following way. 

const mapProp = {
      center: new google.maps.LatLng(24.828844, 67.034527),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

I am adding markers to my map in following way.

const marker = new google.maps.Marker({
      position: latlng,
      map: this.map,
      $this: this,
      title: 'Click to zoom',
      icon: Constants.Image,
    });

I am adding click listener to the marker in following way

marker.addListener('click', function() {
      this.map.setZoom(15);
      this.map.setCenter(marker.getPosition());
      this.$this.showDetailview = true;
    });

nIn the listener's call back function i am setting a component's variable showDetailview to true by this.$this.showDetailview = true; line. But it is not working. I am trying to show a div on basis on this variable but it is not working. Can anyone tell me if I am doing it right or not. If It is wrong please suggest some way to make a components variable to true inside the callback.

Shoaib Iqbal
  • 2,420
  • 4
  • 26
  • 51
  • 2
    Use arrow functions instead of anonymous functions: `addListener('click', () => { ... });` – JB Nizet Aug 04 '18 at 11:36
  • 3
    Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – JB Nizet Aug 04 '18 at 11:37

0 Answers0