カスタムフィールドで取得した住所をgoogleの検索ボックスに入力した場所から近い順に並べる

前提・実現したいこと

wpのカスタムフィールドで住所（緯度経度）を取得しマーカーを刺しつつ、取得した複数の住所をgoogleのsearchboxに入力した住所から近い順にサイドに一覧で出力するというものを作成したいのですがなかなか意図した挙動になりません。
・カスタムフィールドから取得し、マーカーを刺す。
・searchboxから入力した場所を表示する。
の実装まではいけました。

調査および試したこと

・function createMarkerButtonにてマーカーのタイトルを出力して並べているのでrankBy: google.maps.places.RankBy.DISTANCEを途中に追記することで近い順に並び替えができると思い追記してみたがうまく動かなかった。
・nearbysearchはそもそもapiにあるtypeのものでしか動かないのでしょうか...?

該当のソースコード

javascript
1var shopList = [
2
3		<?php
4			$fields = CFS()->get('shop_info');
5			if (!empty($fields)):
6		?>
7			<?php foreach ($fields as $field): ?>
8				{"latlng":[<?php echo $field['latitude']; ?>,<?php echo $field['longitude']; ?>],name:"<?php echo $field['shop']; ?>",comment:""},
9			<?php endforeach;?>
10		<?php endif; ?>
11
12 ];
13  var map;
14  var infowindow;
15  var geocoder;
16	var service;
17
18  function initialize() {
19    
20  	geocoder = new google.maps.Geocoder();
21
22    
23    var opts = {
24      center: latlng,
25      mapTypeId: google.maps.MapTypeId.ROADMAP
26    };
27    map = new google.maps.Map(document.getElementById("map_canvas"), opts);
28
29    var input = document.getElementById('pac-input');
30    var searchBox = new google.maps.places.SearchBox(input);
31
32
33// -----------------------------------------------------------------------------------
34    var markers = [];
35   
36    searchBox.addListener('places_changed', function() {
37      var places = searchBox.getPlaces();
38
39      if (places.length == 0) {
40        return;
41      }
42
43      markers.forEach(function(marker) {
44        marker.setMap(null);
45      });
46      markers = [];
47
48      var bounds = new google.maps.LatLngBounds();
49      places.forEach(function(place) {
50        if (!place.geometry) {
51          console.log("Returned place contains no geometry");
52          return;
53        }
54        var icon = {
55          url: place.icon,
56          size: new google.maps.Size(71, 71),
57          origin: new google.maps.Point(0, 0),
58          anchor: new google.maps.Point(17, 34),
59          scaledSize: new google.maps.Size(25, 25)
60        };
61
62        markers.push(new google.maps.Marker({
63          map: map,
64          icon: icon,
65          title: place.name,
66          position: place.geometry.location
67        }));
68
69        if (place.geometry.viewport) {
70          bounds.union(place.geometry.viewport);
71        } else {
72          bounds.extend(place.geometry.location);
73        }
74      });
75      map.fitBounds(bounds);
76    });
77
78    var bounds = new google.maps.LatLngBounds();
79    var restaurant, i, latlng;
80    for (i in shopList) {
81      restaurant = shopList[i];
82      latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]);
83      bounds.extend(latlng);
84      var marker = createMarker(latlng, restaurant.name, restaurant.comment);
85      createMarkerButton(marker);
86    }
87    map.fitBounds(bounds);
88  }
89
90  function codeAddress() {
91  	var address = document.getElementById("address").value;
92  	geocoder.geocode( { 'address': address}, function(results, status) {
93  		if (status == google.maps.GeocoderStatus.OK) {
94  			map.setCenter(results[0].geometry.location);
95  			var marker = new google.maps.Marker({
96  				map: map,
97  				position: results[0].geometry.location
98  				});
99  		} else {
100  			alert("Geocode was not successful for the following reason: " + status);
101  		}
102  	});
103  }
104
105  function createMarker(latlng, name, comment) {
106    var marker = new google.maps.Marker({
107      position : latlng,
108      map : map,
109      title : name
110    });
111    google.maps.event.addListener(marker, "click", function(){
112      if(infowindow) infowindow.close();
113      var iwopts = {
114        content:  "<b>" + name + "</b><br>" + comment
115      };
116      infowindow = new google.maps.InfoWindow(iwopts);
117      infowindow.open(map, marker);
118    });
119    return marker;
120  }
121  function createMarkerButton(marker) {
122    var ul = document.getElementById("marker_list");
123    var li = document.createElement("li");
124    var title = marker.getTitle();
125		li.innerHTML = title;
126		ul.appendChild(li);
127
128		service = new google.maps.places.PlacesService(map);
129		function callback(results, status) {
130			if (status == google.maps.places.PlacesServiceStatus.OK) {
131				for (var i = 0; i < results.length; i++) {
132				createMarker(results[i]);
133				}
134		    ul.appendChild(li);
135			} else {
136				ul.removeChild(li);
137			}
138		}
139
140    google.maps.event.addDomListener(li, "click", function(){
141      google.maps.event.trigger(marker, "click");
142    });
143  }
144  window.onload = initialize;