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