Intercept and modify requests to Google Maps Autocomplete API

Question

I have web page with input that uses Google Maps API to autocomplete search requests. When user starts typing, he immediately gets suggestions.

What I want is intercept what user types and add some text to it, eg add words "New York" to his request. Is it possible? I've found no way to do this in Javascript

Answer 1

There is a service which returns the Autocomplete-predictions: https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service

You may implement your own Autocomplete eg by using jQueryUI.autocomplete and request this service.

Example:

 (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($('<div/>').css('minHeight','20px').prependTo('body')[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) { console.log(arguments) if (status != google.maps.places.PlacesServiceStatus.OK) { if (t) t.style.textDecoration = 'line-through'; return; } console.log(place.html_attributions) $('div').eq(0).html(place.html_attributions.join('<br/>')) 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, { //here the input will be manipulated input: [request.term,'New York'].join(',') }); 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); }) }, //select select: 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)); function initialize() { var mapOptions = { zoom: 14, center: new google.maps.LatLng(52.5498783, 13.425209099999961), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); $('input').googlePlacesAutocomplete(map); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map_canvas { height:100%; margin:0; padding:0 } #map_canvas{ height:90%; } .googleLogo { padding-bottom:30px !important; font-size:1em; opacity:.9; background:#fff url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white2.png)bottom left no-repeat !important; } .ui-autocomplete .ui-menu-item{ font-size:12px; } 

  <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <input placeholder="type a placename" data-ac='{"ctrl":"TOP_CENTER","bounds":true}'> <div id="map_canvas"></div>