Google Reference Error after installing vue-google-autocomplete


I am using vue.js and Laravel 5.6.12

<strong><a href="https://github.com/olefirenko/vue-google-autocomplete" rel="nofollow">I am following this github page to install vue.js google autocomplete.</a></strong>

Below is the Step by Step guidelines I followed.

<pre class="lang-bash prettyprint-override">npm install vue-google-autocomplete --save

Then added below code in app.js

<pre class="lang-js prettyprint-override">import VueGoogleAutocomplete from 'vue-google-autocomplete' Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

Finally below code in the template.

<pre class="lang-html prettyprint-override"><vue-google-autocomplete id="map" classname="form-control" placeholder="Start typing"> </vue-google-autocomplete>

I got below error


Error in mounted hook: "ReferenceError: google is not defined"


<a href="https://i.stack.imgur.com/2L4m7.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/2L4m7.png" data-original="https://i.stack.imgur.com/2L4m7.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Am I missing anything in above code?


It seems like you have not added google maps script to your index.html.


This component (Vue Google Autocomplete) uses Google Maps Places API to get geo suggests for autocompletion, so <strong>you have to include the Google Maps Places API</strong> in the of your HTML:

</blockquote> <pre class="lang-html prettyprint-override"><!DOCTYPE html> <html> <head> … <!-- NEXT LINE IS SUPER IMPORTANT --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script> </head> <body> … </body> </html>

If you are using vue cli, you can add it to this file: <a href="https://github.com/vuejs-templates/webpack/blob/develop/template/index.html" rel="nofollow">https://github.com/vuejs-templates/webpack/blob/develop/template/index.html</a>

BTW: You can find this script on example page as well view-source: <a href="https://olefirenko.github.io/vue-google-autocomplete/" rel="nofollow">https://olefirenko.github.io/vue-google-autocomplete/</a> (check source code of the page)

<strong>Follow these steps to get an API key</strong>:

<ul><li>Go to the Google API Console.</li> <li>Create or select a project.</li> <li>Click Continue to enable the API and any related services.</li> <li>On the Credentials page, get an API key. Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.</li> <li>From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.</li> <li>In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers.</li> <li>(Optional) Enable billing. See Usage Limits for more information.</li> </ul>

More info about getting the API key <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" rel="nofollow">here</a>


  • Move list elements between two containers, combine with autocomplete
  • Manipulating elements after AJAX load()
  • Generating JAR file with Android Studio and Gradle
  • Encrypting credit card details using AngularJS in Braintree
  • UIAlertController button function not working
  • Android Google Maps API v2 start navigation
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Why Encoding.ASCII != ASCIIEncoding.Default in C#?
  • one Local Olampyad Questions on Informatic in 2011
  • Seeking advice on Jetty HttpClient Hang
  • DomPDF {PAGE_NUM} not on first page
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Jenkins: How To Build multiple projects from a TFS repository?
  • Javascript simulate pressing enter in input box
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • Google cloud sdk not working when python points python3
  • Rearranging Cells in UITableView Bug & Saving Changes
  • How to get icons for entities from eclipse?
  • A cron job substitute?
  • KeystoneJS: Relationships in Admin UI not updating
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • using HTMLImports.whenReady not working in chrome
  • Hits per day in Google Big Query
  • Why joiner is not used after Sequence generator or Update statergy
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • File not found error Google Drive API
  • Linking SubReports Without LinkChild/LinkMaster
  • Is it possible to post an object from jquery to bottle.py?
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Android Heatmap on canvas or ImageView
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF