Google Maps API - autosuggest on hover

Question

I want to make function in my web map that search input finds location, not on autosuggest click, but on autosgested place. Explain: -user points Us in input -autosuggest list places under it, like city1, city2, etc

normal: users clicks place, map reload to this place,

what i want: user hover mouse on place, map reloads to that place

Is this possible ?

I've attached on hover to elements but nothing more...

$('body').on( 'hover', '.pac-container .pac-item', function(){
    console.log($(this));
    console.log($(this).data());
});

Answer 1

There is no mouseover-event for an Autocomplete. It should be possible the find a solution that may work now, but this will be not reliable, because it would assume a behaviour you can't rely on(it may change with the next API-version)

A clean solution would be to request the Autocomplete-Service and implement the Autocomplete based on the response on your own.

As it seems you use jQuery, so it would be an option to use jQueryUI-Autocomplete.

A jQuery-plugin that populates a jQueryUI-autocomplete with results from the places-autocomplete-service(including the hover-behaviour):

(function ($) {
    $.fn.googlePlacesAutocomplete = function (map) {

        //test if required libraries have been loaded
        if ($.type(this.autocomplete) !== 'function') {
            try {
                console.log('jQueryUI.autocomplete not available,'+
                            ' did you load jQueryUI?');
            } catch (e) {}
            return this;
        }

        if ($.type(google) !== 'object' 
              || $.type(google.maps) !== 'object' 
                  || $.type(google.maps.places) !== 'object' 
                      || $.type(google.maps.places.Autocomplete) !== 'function') {
            try {
                console.log('google.maps.places.Autocomplete not available,' +
                            'did you load the places-library?');
            } catch (e) {}
            return this;
        }

        var ac = new google.maps.places.AutocompleteService(),
            pd = new google.maps.places.PlacesService((map) ? map : $('<div/>')[0]);
        this.filter("input:text").each(function () {
            var that = $(this),
                oldApi = google.maps.version < '3.17';
            //callback that will be executed when place-details are available
            detailsCallback = function (place, status, cached, item, t) {
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    if (t) t.style.textDecoration = 'line-through';
                    return;
                }
                if (t) t.style.textDecoration = 'none';
                var data = that.data('ac');
                if (!cached) {
                    data.cache[item.id] = place;
                }
                if (data.map && data.marker) {
                    data.marker.setOptions({
                        icon: place.icon || null,
                        map: data.map,
                        position: place.geometry.location
                    });
                    map.setCenter(place.geometry.location);
                }
            };

            that.data('ac',
            $.extend({}, {
                map: map,
                marker: (map) ? new google.maps.Marker : null,
                cache: {},
                options: {}
            },
            that.data('ac')))
                .autocomplete({
                source: function (request, response) {
                    var o = $.extend({}, that.data('ac').options, {
                        input: request.term
                    });
                    if (that.data('ac').bounds && that.data('ac').map) {
                        o.bounds = that.data('ac').map.getBounds();
                    }

                    ac.getPlacePredictions(o,

                    function (predictions, status) {
                        var r = [];
                        if (predictions) {
                            for (var i = 0; i < predictions.length; ++i) {
                                r.push({
                                    cache: true,
                                    callback: function (a, f) {
                                        pd.getDetails.call(pd, a, f)
                                    },
                                    label: predictions[i].description,
                                    value: predictions[i].description,
                                    id: (oldApi) ? predictions[i].reference 
                                                 : predictions[i].place_id
                                });
                            }
                        }
                        response(r);
                    })
                },

                //mouseover
                focus: function (e, ui) {

                    var data = that.data('ac'),
                        o = (oldApi) ? {
                            reference: ui.item.id
                        } : {
                            placeId: ui.item.id
                        },
                        t = e.toElement;
                    if (data.map && data.marker) {
                        data.marker.setMap(null);
                    }

                    if (ui.item.cache && data.cache[ui.item.id]) {
                        detailsCallback(data.cache[ui.item.id],
                        google.maps.places.PlacesServiceStatus.OK,
                        true,
                        ui.item,
                        t);
                        return;
                    }

                    ui.item.callback.call(pd,
                    o,

                    function (a, b) {
                        detailsCallback.call(pd, a, b, false, ui.item, t);
                    });
                },
                minLength: 3
            })
            //css for google-logo(required when used without a map)
            .autocomplete('widget').addClass('googleLogo')

            //use the autocomplete as map-control 
            if (map && that.data('ac').ctrl) {
                map.controls[google.maps.ControlPosition[that.data('ac').ctrl]]
                  .push(that[0]);
            }

        });
        return this;
    };
}(jQuery));

usage:

$('#inputselector').googlePlacesAutocomplete(mapInstance);

Demo: http://jsfiddle.net/doktormolle/t7ppt8cj/