How to use Google Maps JavaScript API v3's Geocoding Service in Filter.js?

Question

I am using filter.js in a website along with Google Maps API V3 as it shows in its demo/example(of filter.js) with only one difference, my requirements are to use Address instead of Latitude or Longitude and as far I know it could be done using Geocoding Service of Google Maps. I have to modify some of my code:

Before

addMarker: function(salon){
    var that = this;
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(salon.lat, salon.lng),
      map: this.map,
      title: salon.title
    });

    marker.info_window_content = salon.title + '<br/> Treatments: ' + salon.treatments + '<br/> Booking: ' + salon.bookings_1 + '<br/> Address: ' + salon.address + '<br/><a href="' + salon.permalink + '"> View Full Details </a>'
    this.markers[salon.id] = marker

    google.maps.event.addListener(marker, 'click', function() {
      that.infowindow.setContent(marker.info_window_content)
      that.infowindow.open(that.map,marker);
    });
  },

After

addMarker: function(salon){
    //new line for address 
    var salonaddress = salon.address1 + ' ' + salon.address2 + ' ' + salon.address3 + ', ' + salon.city + ', ' + salon.state + ' ' + salon.postal_code + ', ' + salon.country ;
    console.log(" salonaddress: " + salonaddress)
    var that = this;
    geocoder.geocode( { 'address': salonaddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          that.map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: this.map,
              title: salon.title,
              position: results[0].geometry.location
          });
          marker.info_window_content = salon.title + '<br/> Treatments: ' + salon.treatments + '<br/> Booking: ' + salon.bookings_1 + '<br/> Address: ' + salon.address + '<br/><a href="' + salon.   permalink + '"> View Full Details </a>'
            that.markers[salon.id] = marker

            google.maps.event.addListener(marker, 'click', function() {
              that.infowindow.setContent(marker.info_window_content)
              that.infowindow.open(that.map,marker);
            });

        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
    });

  },

It looks like its working but it is not showing markers on map at all. Trying to find my mistake but after many hours still could not fix it. Can any one point out my coding mistake?

Answer 1

I have changed "this" to "that" in following code and it some how fixed my issue. Not sure about the logic yet.

Before:

var marker = new google.maps.Marker({
              map: this.map,
              title: salon.title,
              position: results[0].geometry.location
          });

After:

 var marker = new google.maps.Marker({
              map: that.map,
              title: salon.title,
              position: results[0].geometry.location
          });