Hey so I ran into an issue with the vue-google-maps component. I found it difficult to submit this information to the server. Specifically adding the name attribute to text input field so Laravel can grab the information. I submitted a PR here that may fix the issue.

As a workaround though, it is really easy to implement typeahead into Laravel without Vue.js. For simple typeahead wrapping in Vue gives no added benefit. Google Maps API is doing the fancy async work.

The answer is on stack overflow, of course. Here is the code. I commented out all the vue-google-maps code.

Create a form input and a few lines of javascript:

<div class='form-group'>
<label>Location:</label>
<input id="searchTextField" type="text" name='location' class='form-control'>
</div>
<script>
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Then drop the library into your main layout file:

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY_HERE>&v=3.exp&sensor=false&libraries=places"></script>

Simple way to add Google Maps typeahead into a Laravel application. It is not necessary to wrap the whole thing in Vue.js.

Engineer, writer and community organizer. I built Employbl to help candidates get jobs in the Bay Area: https://employbl.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store