jQuery(function($) {

  var $gmaps = google.maps;
  $gmaps.LatLng.prototype.toString = function() {
    return this.toUrlValue(6);
  };

  var map, marker;
  var g = new $gmaps.Geocoder();
  $('input#btn').click(function() {
    var a = $('input#address').val();
    g.geocode({address:a}, function(r, s) {
      if (s == $gmaps.GeocoderStatus.OK) {
        $('input#latlng').val(r[0].geometry.location);
        marker.setPosition(r[0].geometry.location);
        map.panTo(r[0].geometry.location);
      } else {
        $('input#latlng').val('Not Found!');
      }
    });
  });

  $(window).load(function() {
    var mDiv = $('#mapArea').get(0);
    var initPos = new $gmaps.LatLng(22.322764,114.170688);
    map = new $gmaps.Map(mDiv, {
      center: initPos,
      mapTypeId: $gmaps.MapTypeId.ROADMAP,
      zoom: 16
    });
    marker = new $gmaps.Marker({
      draggable: true,
      map: map,
      position: initPos
    });
    $gmaps.event.addListener(marker, 'dragend', function(e) {
      $('input#latlng').val(e.latLng);
      map.panTo(e.latLng);
    });
  });

});