0

I am using vue.js and Laravel 5.6.12

I am following this github page to install vue.js google autocomplete.

Below is the Step by Step guidelines I followed.

npm install vue-google-autocomplete --save

Then added below code in app.js

import VueGoogleAutocomplete from 'vue-google-autocomplete'
Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

Finally below code in the template.

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

enter image description here

Am I missing anything in above code?

Max Liashuk
  • 1,043
  • 7
  • 18
Pankaj
  • 9,749
  • 32
  • 139
  • 283

1 Answers1

3

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 you have to include the Google Maps Places API in the of your HTML:

<!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: https://github.com/vuejs-templates/webpack/blob/develop/template/index.html

BTW: You can find this script on example page as well view-source: https://olefirenko.github.io/vue-google-autocomplete/ (check source code of the page)

Follow these steps to get an API key:

  • Go to the Google API Console.
  • Create or select a project.
  • Click Continue to enable the API and any related services.
  • 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.
  • From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.
  • In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers.
  • (Optional) Enable billing. See Usage Limits for more information.

More info about getting the API key here

Max Liashuk
  • 1,043
  • 7
  • 18
  • I did not add the script url. I will do that. In the above reference page in my question, there is google api console link which sends me here: https://i.stack.imgur.com/rJwOj.png can u please tell how can i get the api key? – Pankaj Jun 01 '18 at 17:03
  • @Pankaj I've updated the answer, let me know if you have any additional questions – Max Liashuk Jun 01 '18 at 17:12
  • Can you please give your useful suggestions here? https://stackoverflow.com/questions/50649177/error-while-implementing-vue2-google-maps-in-vue-js-and-laravel-5-6-12 – Pankaj Jun 01 '18 at 18:29
  • @Pankaj ok, answered :) – Max Liashuk Jun 01 '18 at 18:56