jQuery autocomplete result for google map api

I'm using jQuery's autocomplete. I'd like to draw the map based on the result that is selected from the autocomplete. I have the lat/long to use captured in variable "latlong"

autocomplete code: http://pastebin.com/YTNnDS51

google map code:

  var map = new GMap2($("#map"开发者_如何学JAVA).get(0));
  var burnsvilleMN = new GLatLng(latlong);
  map.setCenter(burnsvilleMN, 8);

  // setup 10 random points
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  var markers = [];
  for (var i = 0; i < 10; i++) {
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
          southWest.lng() + lngSpan * Math.random());
   marker = new GMarker(point);
   map.addOverlay(marker);
   markers[i] = marker;
  }

  $(markers).each(function(i,marker){
   $("<li />")
    .html("Point "+i)
    .click(function(){
     displayPoint(marker, i);
    })
    .appendTo("#list");

   GEvent.addListener(marker, "click", function(){
    displayPoint(marker, i);
   });
  });

  $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

  function displayPoint(marker, index){
   $("#message").hide();

   var moveEnd = GEvent.addListener(map, "moveend", function(){
    var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
    $("#message")
     .fadeIn()
     .css({ top:markerOffset.y, left:markerOffset.x });

    GEvent.removeListener(moveEnd);
   });
   map.panTo(marker.getLatLng());
  }

if i put the google map code anywhere in the page with a hard coded lat/long it draws it fine. The problem is that for my use I need to wait to draw the map until after the autocomplete event happens so that I can capture the correct lat/long. I'm not sure how to trigger the google map to refresh once I've captured that lat/long

Thanks for your thoughts

I'm using BMap with jquery to draw the google map. This is much easier and works great.

If you want the action to take place after the user selects something from the autocomplete box provide a callback function for the select event of your autocomplete box which will draw the marker: For Example

    $(function(){

        //your autocomplete data structure - here lat and long values are made up so pls use real ones
        var places = [{
            label: "Place 1",
            lat: "34",
            lng: "134"
        }, {
            label: "Place 2",
            lat: "34",
            lng: "134"
        }, {
            label: "Place 3",
            lat: "34",
            lng: "134"
        }];
        $("#tags").autocomplete({
            source: places,
            select: function(event, ui){
                //grab the new marker's lat long - assuming you are storing it in an array of objects as above

                item = ui.item;
                 //draw the new marker on a the map
                showMarker(item.lat,item.lng)
                //if you like pan to the new marker

            }
        });
    });

function showMarker(lat,lng){
         var point = new GLatLng(lat,lng);
         //add a marker
map.addOverlay(new GMarker(point));
//if you want pan the map to marker - assuming that your map object is called "map"
  map.panTo(point)
    }

Hope this helps