Friday, 23 August 2013

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

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

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?

No comments:

Post a Comment