jQuery autocomplete résultat pour google map api

Question

J'utilise la saisie semi-automatique de jQuery. Je souhaite dessiner la carte en fonction du résultat sélectionné dans la saisie semi-automatique. Je le lat/long à utiliser capturé dans la variable "LatLong"

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

code google map:

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()); 
    } 

si je mets le code google map partout dans la page avec un dur codé lat/long il dessine bien. Le problème est que pour mon utilisation, je dois attendre pour dessiner la carte jusqu'à ce que l'événement de saisie semi-automatique se produise afin que je puisse capturer le lat/long correct. Je ne sais pas comment déclencher la carte google pour rafraîchir une fois que je l'ai capturé que lat/long

Merci pour vos pensées

Answer 1

J'utilise bmap avec jquery pour dessiner la carte google. C'est beaucoup plus facile et fonctionne très bien.

Answer 2

Si vous voulez que l'action ait lieu après que l'utilisateur sélectionne quelque chose dans la zone de saisie semi-automatique fournir une fonction de rappel pour l'événement select de votre boîte de saisie semi-automatique qui dessinera le marqueur: Par exemple

$(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 help