xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 474 forks source link

Places Autocomplete without map #653

Closed fuoridallarete closed 4 years ago

fuoridallarete commented 4 years ago

How can I use vue2 google maps autocomplete without the map? I see it is possible (google now requires just its logo if used without map). But how to make it work with this library? Thanks

TrendyTim commented 4 years ago

its mostly shown on the main github page, register VGM for use in your main js/ts

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)

    //// If you want to set the version, you can do so:
    // v: '3.26',
  },

  //// If you intend to programmatically custom event listener code
  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
  //// you might need to turn this on.
  // autobindAllEvents: false,

  //// If you want to manually install components, e.g.
  //// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
  //// Vue.component('GmapMarker', GmapMarker)
  //// then set installComponents to 'false'.
  //// If you want to automatically install all the components this property must be set to 'true':
  installComponents: true
})

then use the autocomplete component where you want it.

 <gmap-autocomplete  @place_changed="processLocationChanged"  placeholder="Location Of Event" class="introInput">
        </gmap-autocomplete>
fuoridallarete commented 4 years ago

Cool. It works, as it is very easy I am confused about how I couldn't do it in the first place. Probably <gmap in calling the component confused me. Sorry and thanks for your time.

TrendyTim commented 4 years ago

no worries took me a little while myself, the demo pages are also a good place to see how it works.

ijunaid8989 commented 4 years ago

but its still not working for me, all I am getting is:

image

TrendyTim commented 4 years ago

@ijunaid8989 I was about to ask if you put your API key in the setup, but I assume you did because the map is showing, or if your not testing on local host the domain might not be in the allowed domains, bit again I'd expect the map not to work either.

Did you click the do you own this website link, it might tell you what's wrong. Otherwise we might need code to see whats going on.

ijunaid8989 commented 4 years ago

I got it working my problem was: The api key was not Places api enabled. thank you