jQuery autocomplete result for google map api

Question

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").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

Answer 1

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

Answer 2

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