// JavaScript Document
    $(document).ready(function() {
        $("#wrapper_map").width($("#map_canvas").width());
		// initialize default lat & lang in this case i set to Indonesia
        var indLat = -2;
        var indLng = 120;
		
		// setup default position into text and hidden input
        $("#sLat").text(indLat);
        $("#sLng").text(indLng);
        $("#lat").val(indLat);
        $("#lng").val(indLng);
		
		// start setup google maps
        var map = new GMap2(document.getElementById("map_canvas"));
        var center = new GLatLng(indLat, indLng);
        map.setCenter(center, 4);
        map.setUIToDefault();
		
        var marker = new GMarker(center, { draggable: true });

        GEvent.addListener(marker, "dragstart", function() {
            map.closeInfoWindow();
        });
		
		// a listener to get current position and store it to hidden input in html
        GEvent.addListener(marker, "dragend", function() {
            // latitude
            $("#sLat").text(roundNumber(getObjectLoc(marker, 'lat'), 5));
            // store it temporary in hidden input (lat)
			$("#lat").val(getObjectLoc(marker, 'lat'));
            // longitude
            $("#sLng").text(roundNumber(getObjectLoc(marker, 'lang'), 5));
            // store it temporary in hidden input (lng)
			$("#lng").val(getObjectLoc(marker, 'lang'));
        });

        // adding marker
        map.addOverlay(marker);
		// end setup google maps
		
		// fungction to get the marker posistion
		getObjectLoc = function(object, type){
			var objectLoc = '';
			if(type=='lat'){
				objectLoc = object.getLatLng().lat();
			}else{
				objectLoc = object.getLatLng().lng();
			}
			
			return objectLoc;
		}
		
		// just round your position if you think it is too long to show
		roundNumber = function(rnum, rlength) {
			newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
			return newnumber;
		}
    });