javascript - Google Maps Autocomplete List - Stack Overflow

admin 管理员组

文章数量: 1086019

I wonder whether someone may be able to help me please.

I'm using the code below to perform an Google Maps Autoplete action upon a user entering address details:

// 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").autoplete({
      //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);
        }
      }
    });
  });
})

and this is how I place it within my form.

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

What I'd now like to be able to do is limit the number of items viewable in the list. I've done some research on several forums and on the Google Maps site but I can't seem to find a solution, so I'm not even sure whether this is possible.

I just wondered whether someone could possibly have a look at this please and provide a little guidance on how I may be able to go about this.

Many thanks and kind regards

I wonder whether someone may be able to help me please.

I'm using the code below to perform an Google Maps Autoplete action upon a user entering address details:

// 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").autoplete({
      //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);
        }
      }
    });
  });
})

and this is how I place it within my form.

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

What I'd now like to be able to do is limit the number of items viewable in the list. I've done some research on several forums and on the Google Maps site but I can't seem to find a solution, so I'm not even sure whether this is possible.

I just wondered whether someone could possibly have a look at this please and provide a little guidance on how I may be able to go about this.

Many thanks and kind regards

• javascript
• google-maps
• autoplete
• google-api
• google-maps-autoplete

Share Improve this question Follow edited Mar 16, 2016 at 7:55 Mosh Feu 29.4k1818 gold badges9393 silver badges141141 bronze badges asked May 28, 2012 at 13:42 IRHMIRHM 1,3261111 gold badges7878 silver badges131131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The Google Maps V3 API now incudes an autoplete feature that will adapt any text input field to autoplete locations &/or Places. It doesn't show thumbnails yet but the addition of Places will be great for some use cases, here's the details:

Documentation: http://code.google./apis/maps/documentation/javascript/places.html#places_autoplete

Reference: http://code.google./apis/maps/documentation/javascript/reference.html#Autoplete

Example: http://code.google./apis/maps/documentation/javascript/examples/places-autoplete.html

I think these will help you.....

After some further research, I found a great tutorial here: http://rjshade./2012/03/27/Google-Maps-autoplete-with-jQuery-UI/ which I've been able to adapt.

本文标签： javascriptGoogle Maps Autocomplete ListStack Overflow