Google Maps Autocomplete, Fix to the Input

Google maps autocomplete, fix to the input

I have the same problem. My solution was:

$('#inputContainer').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
    $('.pac-container').css('top', newTop + 'px');
});

This update the dropdown position when container scrolls.

Google Maps AutoComplete and Directions with fixed destination and variable origin

this.directionsService.route({
      origin: {'placeId': this.originPlaceId},
      destination: {'placeId': this.destinationPlaceId},
      travelMode: this.travelMode
    }, function(response, status) {

In destination substitude with a LatLng:

destination: {lat: 25.116810, lng: 55.123562}

and you can erase input for destination or any event associated to get this field from user.

Google maps autocomplete style

After several attempts over time I found the answer:

Change the top to : top: auto !important

Restrict Google Autocomplete results using bounds option

Your northEast and southWest points are named incorrectly. Change their names:

var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);

screenshot of southWest and northEast locations

If I set them to:

var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);

The bounds object is correct.

proof of concept fiddle

screenshot with correct northEast/southWest naming

code snippet:

// This example requires the Places library. Include the libraries=places

// parameter when you first load the API. For example:

// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {

    center: {

      lat: -33.8688,

      lng: 151.2195

    },

    zoom: 13

  });

  var input = document.getElementById('searchTextField');

  var northEast = new google.maps.LatLng(43.941160, -78.895187);

  var southWest = new google.maps.LatLng(42.946172, -81.296577);

  var SWmark = new google.maps.Marker({

    map: map,

    position: southWest,

    title: southWest.toUrlValue(6),

    label: "SW"

  });

  var NEmark = new google.maps.Marker({

    map: map,

    position: northEast,

    title: northEast.toUrlValue(6),

    label: "NE"

  });

  var TorontoBounds = new google.maps.LatLngBounds(southWest, northEast);

  var rectangle = new google.maps.Rectangle({

    map: map,

    bounds: TorontoBounds

  });

  map.fitBounds(TorontoBounds);

  var options = {

    bounds: TorontoBounds,

    types: ['address'],

    componentRestrictions: {

      country: 'CA'

    }

  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);

}

/* Always set the map height explicitly to define the size of the div

 * element that contains the map. */

#map {

  height: 80%;

}

/* Optional: Makes the sample page fill the window. */

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

<div id="pac-container">

  <input id="searchTextField" type="text" placeholder="Enter a location">

</div>

<div id="map"></div>

<div id="infowindow-content">

  <img src="" width="16" height="16" id="place-icon">

  <span id="place-name" class="title"></span><br>

  <span id="place-address"></span>

</div>

<!-- Replace the value of the key parameter with your own API key. -->

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

How to clear the input bound to the Google Places Autocomplete?

It appears that the autocomplete internally listens to the blur-event of the input, so lets give it something to listen for and clear the field after that:

inputId_div.blur();    
setTimeout(function(){
 inputId_div.val('')
 inputId_div.focus();},10);

How to add Google Maps Autocomplete search box?

A significant portion of this code can be eliminated.

HTML excerpt:

<head>
  ...
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  ...
</head>
<body>
  ...
  <input id="searchTextField" type="text" size="50">
  ...
</body>

Javascript:

function initialize() {
  var input = document.getElementById('searchTextField');
  new google.maps.places.Autocomplete(input);
}

google.maps.event.addDomListener(window, 'load', initialize);

Google Places Autocomplete not working only sometimes

It was, in fact, the double inclusion of a google API. This is despite the fact one include library was geometry and this was places, and that the callback on the Place script was happening even in fail states..

Simply removing the geometry include on the relevant pages fixed the Autocomplete functionality 100% (and we could drop the sessiontoken), but geometry was needed for other functions on the page. That was solved by adding it to the include made for the place library. Simply use commas to target multiple libraries; I didn't see that mentioned in the documentation, but is was an easy guess:

<script src="https://maps.googleapis.com/maps/api/js?key=********&libraries=places,geometry&callback=initAutocomplete" async defer></script>

Now, if you need geometry (or whatever other library) higher and sooner than your place include, that is a new problem I did not have. But for anyone finding this, my most simple recommendation would be moving the whole autocomplete chunk up there and combining the include in the same way. There are then 2 possible issues: The other script already having a callback, and the form potentially not existing yet.

The callbacks can be combined trivially if only the first point is your issue; just do the other callback code then the autocomplete. For just the second, there are two options: First, if you can have your form appearing trigger an event, then have the callback set a listener for it to then to its usual (watch for the form possibly loading first though!). Second, a setInterval that checks for the element existing and does the work when it is found (and stops checking)--that is dirty, but will work with just vanilla js; there is probably a better option if whatever framework you have. If you have both problems, just have the listener/interval at the start of the callback.

Google Maps Autocomplete, Fix to the Input