back | source
Search POI
  1. Create new div element and assign its name to be a placeholder for searching information
    //HTML
    <div id="result"></div>
    
    //Javascript
    map.Search.placeholder(
        document.getElementById('result')
    );
  2. Create new text box (e.g. #search) for keyword and options to be submitted by clicking the button
  3. Function doSearch();
    search = document.getElementById('search');
    
    //Enter event #search
    search.onkeyup = function(event) {
      if((event || window.event).keyCode != 13)
         return;
      doSearch();
    }
    
    function doSearch() {
      map.Search.search(search.value, {
        area: document.getElementById('area').value,
        tag: document.getElementById('tag').value,
        span: document.getElementById('span').value,
        limit: document.getElementById('limit').value
      });
      suggest.style.display = 'none';
    }

    How to use search function
    map.Search.search(KEYWORD, OPTIONS);
    • KEYWORD: Keyword
    • OPTIONS: Extra options
      • area: Geocode of search area , 10 is Bangkok , 1007 is Pathumwan district
      • tag: Tag such as hospital,school
      • span: Span with unit in deg, m or km
      • limit: Number of results returned
  4. How to set default language on the map
    map.Search.language(LANGUAGE);
    • LANGUAGE: th or en

    Geocode list

Suggest
  1. Set oninput event to search box
    search.oninput = function() {
      if (search.value.length < 3) {
        suggest.style.display = 'none';
        return;
      }
      
      map.Search.suggest(search.value, {
        area: document.getElementById('area').value
      });
    };
  2. Bind suggest event and get argument result on display
    suggest = document.getElementById('suggest');
    
    map.Event.bind('suggest', function(result) {
      if (result.meta.keyword != search.value) return;
      
      suggest.innerHTML = '';
      for (var i = 0, item; item = result.data[i]; ++i) {
        longdo.Util.append(suggest, 'a', {
          innerHTML: item.d,
          href: 'javascript:doSuggest(\'' + item.w + '\')'
        });
      }
      suggest.style.display = 'block';
    });
          
    function doSuggest(value) {
      search.value = value;
      doSearch();
    }

keyword:
123
language:
area: tag: span: limit: