back | source
Searching location via JSON API
  1. Creating a search bar
    <div id="searchbar">
      <div>
        Keyword: <input id="searchbox" type="text"  />
        <button class="seacrh-btn" id="searchbutton" type="button" >search</button></br>
      </div>
      <table id="searchoption">
        <tr>
          <td>lat: </td><td><input id="lat" type="text" value="13.5" /></td>
          <td>lon: </td><td><input id="lon" type="text" value="100.7" /></td>
          <td>area: </td><td><input id="area" type="text" value="" /></td>
          <td>tag: </td><td><input id="tag" type="text" value="hotel" /></td>
        </tr>
        <tr>
          <td>locale: </td><td><input id="locale" type="text" value="en" /></td>
          <td>offset: </td><td><input id="offset" type="text" value="0" /></td>
          <td>limit: </td><td><input id="limit" type="text" value="20" /></td>
          <td>span: </td><td><input id="span" type="text" value="100km" /></td>
        </tr>
      </table>
    </div>
  2. Create div element for search result displaying
    <div id="searchresult"></div>
  3. Search box function
    var suggestTimeout;
    var suggestKeyword = null;
    var searchKeyword = null;
    var suggestList = [];
    
    $(function() {
      $('#searchbox').keyup(function(event) {
        if (event.keyCode == 13) {
          doSearch();
          return;
        }
        clearTimeout(suggestTimeout);
        suggestTimeout = setTimeout(function() {
          doSuggest();
        }, 500);
      });
      $('#searchbutton').click(doSearch);
    });
    
    function doSuggest() {
      var value = $('#searchbox').val();
      if (value == suggestKeyword) return;
      if (value.length < 3) {
        $('#searchresult').html('Type at least 3 characters');
        return;
      }
      
      suggestKeyword = value;
      searchKeyword = null;
      $('#searchresult').empty();
      var data = { keyword: suggestKeyword };
      if ($('#area').val()) data.area = $('#area').val();
      if ($('#offset').val()) data.offset = $('#offset').val();
      if ($('#limit').val()) data.limit = $('#limit').val();
      $.getJSON('http://go.gistda.or.th/mapsearch/json/suggest?key=' + apikey + '&callback=?', data, function(msg) {
        if (msg.meta.keyword != suggestKeyword) return;
        var html = '';
        for (var i = 0; i < msg.data.length; i++) {
          suggestList[i] = msg.data[i].w;
          html += '<a href="javascript:suggestClick(' + i + ')">' + msg.data[i].d + '</a><br />';
        }
        $('#searchresult').html(html);
      });
    }
    
    function suggestClick(index) {
      $('#searchbox').val(suggestList[index]);
      doSearch();
    }
    
    function doSearch() {
      clearTimeout(suggestTimeout);
      suggestKeyword = null;
      searchKeyword = $('#searchbox').val();
      $('#searchresult').empty();
      var data = {};
      if (searchKeyword) data.keyword = searchKeyword;
      if ($('#lat').val()) data.lat = $('#lat').val();
      if ($('#lon').val()) data.lon = $('#lon').val();
      if ($('#area').val()) data.area = $('#area').val();
      if ($('#tag').val()) data.tag = $('#tag').val();
      if ($('#locale').val()) data.locale = $('#locale').val();
      if ($('#offset').val()) data.offset = $('#offset').val();
      if ($('#limit').val()) data.limit = $('#limit').val();
      if ($('#span').val()) data.span = $('#span').val();
      $.getJSON('http://go.gistda.or.th/mapsearch/json/search?key=' + apikey + '&callback=?', data, function(msg) {
        if (msg.meta.keyword != searchKeyword && msg.meta.keyword != 'tag: ' + data.tag) return;
        var html = 'start: ' + msg.meta.start + ' end: ' + msg.meta.end + ' hasmore: ' + msg.meta.hasmore + '<ol>';
        for (var i = 0; i < msg.data.length; i++) {
          html += '<li>' + msg.data[i].name + '</li>';
        }
        $('#searchresult').html(html + '</ol>');
      });
    }
    • lat: Latitude
    • lon: Longitude
    • area: Geocode of search area , 10 is bangkok , 1007 is pathumwan district
    • tag: Tag such as hospital,school
    • locale: Select language of returning result (th, en)
    • offset: Offset of the first result returned
    • limit: Number of results returned
    • span: Span with unit in deg, m or km