谷歌地图自动完成列表

Question

我不知道是否有人也许能帮助我请。

我用下面的代码在用户输入地址信息执行谷歌地图自动完成动作：

// JavaScript Document 
var geocoder; 
var map; 
var marker; 

function initialize(){ 
    var myOptions = { 
    zoom: 6, 
    center: new google.maps.LatLng(54.312195845815246, -4.45948481875007), 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.TOP_RIGHT 
    }, 
    navigationControl: true, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.ZOOM_PAN, 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 
    scaleControl: true, 
    scaleControlOptions: { 
     position: google.maps.ControlPosition.BOTTOM_LEFT 
    } 
    }; 

    map = new google.maps.Map(document.getElementById('map'), myOptions); 
    geocoder = new google.maps.Geocoder(); 
    marker = new google.maps.Marker({ 
    map: map, 
    draggable: true 
    }); 
} 

$(document).ready(function() { 
    initialize(); 
    $(function() { 
    $("#address").autocomplete({ 
     //This bit uses the geocoder to fetch address values 
     source: function(request, response) {  
     geocoder.geocode({'address': request.term }, function(results, status) { 
      response($.map(results, function(item) { 
      return { 
       label: item.formatted_address, 
       value: item.formatted_address, 
       latitude: item.geometry.location.lat(), 
       longitude: item.geometry.location.lng() 
      } 
      })); 
     }) 
     }, 
     //This bit is executed upon selection of an address 
     select: function(event, ui) { 
     $("#osgb36lat").val(ui.item.latitude); 
     $("#osgb36lon").val(ui.item.longitude); 
     var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); 
     marker.setPosition(location); 
     map.setZoom(16); 
     map.setCenter(location); 

     } 
    }); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     if (results[0]) { 
      $('#address').val(results[0].formatted_address); 
      $('#osgb36lat').val(marker.getPosition().lat()); 
      $('#osgb36lon').val(marker.getPosition().lng()); 

      var point = marker.getPosition(); 
      map.panTo(point); 
     } 
     } 
    }); 
    }); 
}) 

，这是我怎么把它放在我的表单中。

<div> 
    <input name="address" type="text" id="address" size="40" maxlength="40" style="font:Calibri; font-size:12px" /> 
</div> 

我现在想要做的是限制列表中可查看项目的数量。我在几个论坛和谷歌地图网站上做了一些研究，但似乎找不到解决方案，所以我甚至不确定这是否可行。

我只是想知道一个人是否有可能有一个看看这个，请，并提供如何，我也许可以去了解这一点了指导。

许多的感谢和亲切的问候

Answer 1

经过进一步的研究，我发现了一个伟大的教程在这里：http://rjshade.com/2012/03/27/Google-Maps-autocomplete-with-jQuery-UI/，我已经能够适应。

Answer 2

的谷歌地图API V3现在incudes自动完成功能，可以适应任何文本输入框自动完成位置& /或地点。它不显示缩略图，但是这场另外的地方将是伟大的一些使用情况下，这里的细节：

文档：http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete

参考：http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

例子：http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

我认为这些会帮助你.....