Autocomplete in google map

Question

I had wrote a script to use the Google map in Vf page. I want to use i want to use the auto complete 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>

Answer 1

You might consider using the Google places autocomplete API for this. The places API is a separate module that you need to load in addition to the main Google Maps API.

See https://developers.google.com/maps/documentation/javascript/places.