Hello All,
             I had wrote a script to use the google map in Vf page. I want to use i want to use the autocomplete  city text box. Can you help me out Guys.

Here is my script

<script>
var marker=null ;
var map=null ; 
function initialize() {  
       
     var positioninit = new google.maps.LatLng('{!latitude}', '{!longitude}');     
     var mapOptions = {
        zoom: 4,
        center: positioninit,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };     
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    if('{!latitude}' != '' && '{longitude}' != ''){
        placeCoordinate(positioninit);
    }
} 
google.maps.event.addDomListener(window, 'load', initialize);
function saveLocation(){
    $('.latitudeField').val(marker.position.lat());
    $('.longitudeField').val(marker.position.lng());
    saveAccount();
}
function showLocation(){
    alert('Latitude: ' + marker.position.lat() + '\nLongitude: ' + marker.position.lng());
}
function searchAddr(){
    var addrInput = document.getElementById('id_city');
    new google.maps.Geocoder().geocode( { 'address': addrInput.value}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        placeCoordinate(results[0].geometry.location);
        addrInput.value = results[0].formatted_address;  
        saveLocation();      
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
    });
}
function placeCoordinate(location){
    if(!marker){
        marker = new google.maps.Marker({
            map: map,
            draggable: true
        });
        google.maps.event.addListener(marker, 'click', showLocation);
    }
    marker.setPosition(location);
    map.setCenter(location);
    map.setZoom(15);
}
</script>