Build Google Maps Typeahead Functionality with Vue.js and Laravel 5.3

Connor Leech
Employbl
Published in
2 min readDec 28, 2016

--

What we’ll be building!

In my last post we created a Laravel 5.3 application and added authentication. In this tutorial we are going to add Google Maps API typeahead functionality for selecting addresses.

In this app, we want users to be able to see places as they type. For this we’ll GuillaumeLeclerc/vue-google-maps component, specifically the placesInput component.

$ npm i vue-google-maps --save

Rename resources/assets/js/components/Example.vue to resources/assets/js/components/LocationInput.vue. In that file we will create our custom Vue component.

<template><place-input
:place.sync="placeInput.place"
:types.sync="placeInput.types"
:component-restrictions.sync="placeInput.restrictions"
class='form-control'
></place-input>
<pre>{{ placeInput.place | json }}</pre></template><script>
import { PlaceInput, Map } from 'vue-google-maps'
export default {
data() {
return {
placeInput: {
place: {
name: ''
},
types: [],
restrictions: {'country': 'usa'}…

--

--

Connor Leech
Employbl

Girl Dad x 2. Cofounder @Employbl. Software Engineer @CommentSold.