Maps API v3 Places Rank by distance

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places,geometry"></script>
<div id="map_canvas"></div>
<div id="keywordField">
    <input id="keyword" type="text" value="mexican" />
</div>
<div id="controls"> <span id="typeLabel">Type: </span>

    <select id="type">
        <option value="bar">Bars</option>
        <option value="cafe">Cafe</option>
        <option value="clothing_store">Clothing store</option>
        <option value="museum">Museums</option>
        <option value="restaurant" selected="selected">Restaurants</option>
        <option value="university">University</option>
    </select> <span id="rankByLabel">
      Rank by:
    </span>

    <select id="rankBy">
        <option value="prominence">Prominence</option>
        <option value="distance" selected="selected">Distance</option>
    </select>
</div>
<div id="listing">
    <table id="resultsTable">
        <tbody id="results"></tbody>
    </table>
</div>

CSS

#map_canvas {
    width: 500px;
    height: 300px;
}

JavaScript

var map, places, iw;
  var markers = [];
  var searchTimeout;
  var centerMarker;
  var autocomplete;
  var hostnameRegexp = new RegExp('^https?://.+?/');
  var myLatlng;

  function initialize() {
      myLatlng = new google.maps.LatLng(30.6906, -97.656);
      var myOptions = {
          zoom: 15,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
      places = new google.maps.places.PlacesService(map);
      google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);

      document.getElementById('keyword').onkeyup = function (e) {
          if (!e) var e = window.event;
          if (e.keyCode != 13) return;
          document.getElementById('keyword').blur();
          search(document.getElementById('keyword').value);
      }

      var typeSelect = document.getElementById('type');
      typeSelect.onchange = function () {
          search();
      };

      var rankBySelect = document.getElementById('rankBy');
      rankBySelect.onchange = function () {
          search();
      };

  }

  function tilesLoaded() {
      search();
      google.maps.event.clearListeners(map, 'tilesloaded');
      google.maps.event.addListener(map, 'zoom_changed', searchIfRankByProminence);
      google.maps.event.addListener(map, 'dragend', search);
  }

  function searchIfRankByProminence() {
      if (document.getElementById('rankBy').value == 'prominence') {
          search();
      }
  }

  function search() {
      clearResults();
      clearMarkers();

      if (searchTimeout) {
          window.clearTimeout(searchTimeout);
      }
      searchTimeout = window.setTimeout(reallyDoSearch, 500);
  }

  function reallyDoSearch() {
      var type = document.getElementById('type').value;
      var keyword = document.getElementById('keyword').value;
      var rankBy = document.getElementById('rankBy').value;

      var search = {};

      if (keyword)...