Adding Autocomplete input in plugin gmap3 by jQuery

Question

I want add Autocomplete input in plugin gmap3 that after click on address move marker on it place and get latitude and longitude, but i can not done it. i tried as:

Demo: http://jsfiddle.net/ezJUm/

<div id="content">
    <input id="searchTextField" type="text">
    <div id="map_canvas" class="line"></div>
    <div id="latlng" class="line">click the map</div>
    <div id="address" class="line">click the map</div>
</div>

$(document).ready(function () {
    // create the map
    var map = $("#map_canvas").gmap3({
        lat: 43.0566,
        lng: -89.4511,
        zoom: 12
    });
    //*********************** Autocomplete *********************************
    var lat = 26.535266981346876,
        lng = 54.02773082256317,
        latlng = new google.maps.LatLng(lat, lng),
        image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

    mapG = new google.maps.Map(document.getElementById('map_canvas')),
    marker = new google.maps.Marker({
        position: latlng,
        map: mapG,
        icon: image
    });
    var input = document.getElementById('searchTextField');
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });
    autocomplete.bindTo('bounds', mapG);
    var infowindow = new google.maps.InfoWindow();
    //*********************** Autocomplete *********************************

    // add click handlers
    map.onclickReverseGeocode(function (address) {
        $("#address").html(address);
    });
    map.onclickGetLatLng(function (latlng) {
        $("#latlng").html(latlng[0] + ',' + latlng[1]);
    });
});​

What do i do?

Answer 1

You need to set up a place_changed event listener on the autoComplete object like so. Here is an example of autocomplete.

google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      input.className = '';
      var place = autocomplete.getPlace();
        console.log(place);
      if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
      }

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        mapG.fitBounds(place.geometry.viewport);
      } else {
        mapG.setCenter(place.geometry.location);
        mapG.setZoom(17);  // Why 17? Because it looks good.
      }
      var image = new google.maps.MarkerImage(
          place.icon,
          new google.maps.Size(71, 71),
          new google.maps.Point(0, 0),
          new google.maps.Point(17, 34),
          new google.maps.Size(35, 35));
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);

      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
      infowindow.open(mapG, marker);
    });

I've updated the jsFiddle - http://jsfiddle.net/ezJUm/1/