9720

Google Reference Error after installing vue-google-autocomplete

Question:

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

<blockquote>

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

</blockquote>

<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?

Answer1:

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

<blockquote>

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>

Recommend

  • 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