I am trying to use the geocoding service with the google maps to display markers for nearby places. I am not getting well sorted results, that is they appear to be random and not close to the zipcode provided. I am using a radius of 50000. The code is as given below.
latlng = new google.maps.LatLng(lat,longitude);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//alert("Radius:"+radius_hidden);
var requestsearch = {
location: latlng,
radius: radius_hidden,
name: searchname,
types: ['store']
};
// keyword: searchname,//name: searchname, to get like pages and name to get exact
service = new google.maps.places.PlacesService(map);
//service.textSearch(requestsearch, callback);
service.search(requestsearch, callback);
if(map != null) {
google.maps.event.addListener(map, 'drag', function(event) {
calculateCenter();
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
//google.maps.event.trigger(map, 'resize');
});
function calculateCenter() {
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0 ; i < markersArray.length ; i++) {
latlngbounds.extend(markersArray[i].getPosition());
}
//map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
center = map.getCenter();
}
function callback(results, status)
{
var listing='<table width="100%" border="1">';
var num=5;
markersArray = new Array();
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++)
{
var pincode='';
var address='';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': results[i].vicinity,
'partialmatch': true},function(resultsp, status)
{
if (status == 'OK' && resultsp.length > 0)
{
address=resultsp[0].formatted_address;
var len=resultsp[0].address_components.length-1;
var res=resultsp[0].address_components[len].short_name;
if(res!=undefined)
{
//address+="<br>Pincode:"+res.toString();
}
//listing+='<tr><td>Zip Code: '+res.toString()+'</td></tr>';
}
});
marker = new google.maps.Marker({
position: results[i].geometry.location,
title: results[i].name,
zIndex: 2,
icon: gicons["blue"]
});
markersArray.push(marker);
calculateCenter();
listing+='<tr><td>';
var address_link=results[i].vicinity.replace(" ","+");
if(i==0)
{
listing+='<table id="div5" width="100%" >';
}
else if(i%5==0)
{
num+=5;
listing+='<table id="div'+num+'" style="display:none;" width="100%">';
}
//'+results[i].name+'
listing +='<tr id="searchadd"><td ><input type="hidden" value="'+results[i].name+'" name="end'+i+'" id="end'+i+'"></td></tr><tr><td style="word-wrap: break-word;" onmouseout="markersArray['+i+'].setIcon(gicons.blue)" onmouseover="markersArray['+i+'].setIcon(gicons.yellow)" class="" id="item-'+i+'">'+getaddress(results[i].vicinity)+'<div id="spacer" style="width:120px;height:1px;float:left;"></div><a style="width:100px;height: 20px;" class="sty-hyperlink" target="_blank" href="https://maps.google.com/maps?daddr='+address_link+'"><b><?php echo getFieldFromDB('user_config','DirectionText'); ?></b></a><br></td></tr>';
if(i ==(results.length-1))
{
listing+='</table>';
listing+='<span id="largerwindowlink"><br><a target="_blank" class="sty-action-buttn" href="<?php echo $finalURL; ?>"><?php echo trim(getFieldFromDB('user_config','ActionButtonText')); ?></a></span>';
}
else if(i>0 &&(i+1)%5==0)
{
listing+='<tr><td align="right"><a class="sty-hyperlink" style="width:100px;height: 20px;" href="javascript:void(0);" onclick="javascript:show_hide_table('+num+');" ><b><?php echo getFieldFromDB('user_config','MoreResultText'); ?></b></a></td></tr></table>';
}
listing+='</td></tr>';
}
showOverlays(5);
listing +='</table>';
if(results.length<=0)
{
listing='<br><br><span style="color:green;">Sorry! No stores found.<br>Please try another franchise name</span><br><br>';
}
}
else
{
listing='<br><br><span style="color:green;">Sorry! No stores found.<br>Please try another franchise name</span><br><br>';
}
document.getElementById("listingAddress").innerHTML=listing;
}
function showOverlays(no)
{
if (markersArray)
{
for (i in markersArray)
{
if(i<no && i>=no-5)
markersArray[i].setMap(map);
}
}
}
function clearOverlays()
{
if (markersArray)
{
for (i in markersArray)
{
markersArray[i].setMap(null);
}
}
}
I want to have the results in correct order, that is the closer ones first and then the rest.
If you want the places results ordered by distance, you need to tell the API to do that.
https://developers.google.com/maps/documentation/javascript/reference#RankBy
Example
Example