Baidu map location demo

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Google map location demo</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="getInfo">Loation:
    <input id="getInfo_location" type="text">
  </div>

  <div class="getInfo">Lat/Lng:
    <input id="getInfo_latlng" type="text">
  </div>

  <div class="getInfo">Timezone/s:
    <input id="getInfo_timezone" type="text">
  </div>

  <div id="showMap">
    <input id="searchBox" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
  </div>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://api.map.baidu.com/api?v=1.4"></script>
  <script src="script.js"></script>  
</body>
</html>

var mapId = 'map';
var searchId = 'searchBox'

var $searchBox = $('#' + searchId);
var $location = $('#getInfo_location');
var $latlng = $('#getInfo_latlng');
var $timezone = $('#getInfo_timezone');

var isAutocomplete = false;

var map = new BMap.Map(mapId);
var marker = new BMap.Marker();
var geocoder = new BMap.Geocoder();
var autocomplete = new BMap.Autocomplete({
  input: searchId,
  location: map,
  //types: "city",
  onSearchComplete: function() {
    if (isAutocomplete) {
      autocomplete.show();
    } else {
      autocomplete.hide();
    }
  }
});
var initPoint = new BMap.Point(116, 33);
var initZoom = 6;

map.centerAndZoom(initPoint, initZoom);
map.enableInertialDragging();
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.addEventListener("tilesloaded", loadMap);
map.addEventListener("click", clickMap);

autocomplete.addEventListener("onconfirm", searchMap);
$searchBox.on("keydown", autocompleteMap);

/*******************************************************************************
 *
 *  Function Definition
 *
 *******************************************************************************/
function loadMap() {
  // var searchBox = new BMap.Autocomplete({ 
  //   input : searchId,
  //   location : map
  // });
}

function setMarker(point) {
  map.removeOverlay(marker);
  marker = new BMap.Marker(point);
  map.addOverlay(marker);
}

function setSearchBox(location) {
  $searchBox.val(location);
}

function setLocation(location) {
  $location.val(location);
}

function setLatlng(latlng) {
  latlng = latlng.lat + "," + latlng.lng;
  $latlng.val(latlng);
}

function infoTimezone(latlng) {

}

function clickMap(e) {
  var point = e.point;
  isAutocomplete = false;
  geocoder.getLocation(point, function(results) {
    var location = (results) ? results.address : "";
    if (location) {
      setMarker(point);
      setSearchBox(location);
      setLocation(location);
      setLatlng(point);
      //setTimezone(event.latLng);
    } else {
      console.warn("geocoder is not match!");
    }
  });
}

function autocompleteMap(e) {
  isAutocomplete = true;
}

function searchMap(e) {
  var keyCode = e.keyCode;
  var location = $searchBox.val();

  geocoder.getPoint(location, function(results) {
    var point = (results) ? results : "";
    if (point) {
      map.panTo(point);
      setMarker(point);
      setLocation(location);
      setLatlng(point);
      //setTimezone(event.latLng);
    } else {
      console.warn("geocoder is not match!");
    }
  });
}

      
.getInfo{
  margin: 5px;
  height:20px;
  width:100%
}
.getInfo input {
  width:500px;
}

#showMap {
  border:1px solid red;
  height:400px;
  width:100%
}
#map {
  height: 100%;
}

.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#searchBox {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

.pac-container {
  font-family: Roboto;
}

#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}

#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}