No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Rohit
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 10
    • Best 2
    • Groups 0

    Rohit

    @Rohit

    1
    Reputation
    1
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Rohit Follow

    Best posts made by Rohit

    • RE: Google autocomplete places with q-input

      Here is the solution that worked for me without any package.
      it might help some one.
      <template>
      <q-input
      ref=“autocomplete”
      filled
      v-model=“user.address”
      label=“Physical Address”
      for=“address” //id attribute
      hint=“Your permanent address”
      :rules="[val => !!val || ‘This field is required.’]"
      />
      </template>

      and in mounted
      <script>
      mounted() {
      this.autocomplete = new google.maps.places.Autocomplete(
      // (this.$refs.autocomplete),
      (document.getElementById(“address”)),
      {types: [‘geocode’]}
      );
      this.autocomplete.addListener(‘place_changed’, () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      console.log(ac);
      }
      });
      <script>

      posted in Help
      R
      Rohit
    • RE: Google auto populate address without map

      I remove the the vue-google-autocomplete package.

      Import
      <script src=“https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places”></script>

      I find out that i was giving reference instead of id, I guess google map api only work with id attribute.

      Here is the solution that worked for me. it might help some one.
      <q-input
      ref=“autocomplete”
      filled
      v-model=“user.address”
      label=“Physical Address”
      for=“address” //id attribute
      hint=“Your permanent address”
      :rules="[val => !!val || ‘This field is required.’]"
      />

      and in mounted

      mounted() {
      this.autocomplete = new google.maps.places.Autocomplete(
      // (this.$refs.autocomplete),
      (document.getElementById(“address”)),
      {types: [‘geocode’]}
      );
      this.autocomplete.addListener(‘place_changed’, () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      console.log(ac);
      }
      });

      Also Thanks for your time @dobbel

      posted in Framework
      R
      Rohit

    Latest posts made by Rohit

    • RE: Google autocomplete places with q-input

      Here is the solution that worked for me without any package.
      it might help some one.
      <template>
      <q-input
      ref=“autocomplete”
      filled
      v-model=“user.address”
      label=“Physical Address”
      for=“address” //id attribute
      hint=“Your permanent address”
      :rules="[val => !!val || ‘This field is required.’]"
      />
      </template>

      and in mounted
      <script>
      mounted() {
      this.autocomplete = new google.maps.places.Autocomplete(
      // (this.$refs.autocomplete),
      (document.getElementById(“address”)),
      {types: [‘geocode’]}
      );
      this.autocomplete.addListener(‘place_changed’, () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      console.log(ac);
      }
      });
      <script>

      posted in Help
      R
      Rohit
    • RE: Google auto populate address without map

      I remove the the vue-google-autocomplete package.

      Import
      <script src=“https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places”></script>

      I find out that i was giving reference instead of id, I guess google map api only work with id attribute.

      Here is the solution that worked for me. it might help some one.
      <q-input
      ref=“autocomplete”
      filled
      v-model=“user.address”
      label=“Physical Address”
      for=“address” //id attribute
      hint=“Your permanent address”
      :rules="[val => !!val || ‘This field is required.’]"
      />

      and in mounted

      mounted() {
      this.autocomplete = new google.maps.places.Autocomplete(
      // (this.$refs.autocomplete),
      (document.getElementById(“address”)),
      {types: [‘geocode’]}
      );
      this.autocomplete.addListener(‘place_changed’, () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      console.log(ac);
      }
      });

      Also Thanks for your time @dobbel

      posted in Framework
      R
      Rohit
    • RE: Google autocomplete places with q-input

      @Mauri what solution did work for you

      posted in Help
      R
      Rohit
    • RE: Google auto populate address without map

      Thanks @dobbel
      I’ve installed the package using npm install vue-google-places --save.

      got this error

      ***Failed to compile.

      ./node_modules/vue-google-places/dist/vue-google-places.esm.js
      Module not found: Error: Can’t resolve ‘vuetify/lib’ in ‘C:\xampp5\htdocs\fifit\fifit-app-front\node_modules\vue-google-places\dist’***

      i tried to install npm install vuetify/lib --save getting this

      npm ERR! enoent This is related to npm not being able to find a file.

      posted in Framework
      R
      Rohit
    • RE: Google auto populate address without map

      @dobbel I don’t want what this " https://github.com/PDERAS/vue2-geocoder " plugin does.

      What i want is [ Google Place autocomplete address ] without map,
      There is one text field for address & when any user types any letters or words it will show address result based on matched words & split that address into country/street/city/postal code.

      FOR Example:- if user search for 41 Bennett Way
      it must show similar address list here is 1 example 41 Bennett Way, Upper Coomera QLD 4209, Australia

      If there is any other plugin or way to get the above result.
      i’m happy to do the changes

      for reference please check image here

      https://storage.googleapis.com/support-forums-api/attachment/thread-35720319-4559659613673407766.png

      posted in Framework
      R
      Rohit
    • RE: Google auto populate address without map

      @dobbel thanks for making the points, what i want is when any one search any address, he/she will see the list of addresses & will select one of them.
      I need from that selected address is street, state, country, city, postal code.

      I will try with this " https://github.com/PDERAS/vue2-geocoder " & will make a comment here.

      Thanks

      posted in Framework
      R
      Rohit
    • RE: Google auto populate address without map

      @dobbel
      Is there any way that i can use to display available address when user search for an address.
      Can you please suggest & guide?

      For eg. as image in the the below link

      https://support.google.com/maps/thread/35720319?hl=en

      posted in Framework
      R
      Rohit
    • Google auto populate address without map

      Hi everyone,

      I’m using VueGmaps package which i installed it using
      npm install vue-gmaps --save

      <script>
            import Vue from "vue";
            import VueGmaps from 'vue-gmaps'
            
        mounted() {
      this.autocomplete = new google.maps.places.Autocomplete(
        (this.$refs.autocomplete),
        { 
          type: ['geocode'],
          componentRestrictions: { country: 'NZ' }
        }
      )
                 this.autocomplete.addListener('changed_place',()=>{
          let place = this.autocomplete.getPlace()
          let ac = place.address_components
          let city = ac
          this.city = city
          this.cities.push(ac[0]['short_name'].concat(', ',ac[2]['short_name']))
      
          console.log(this.city);
         })
       },
               </script>
      
               <teamplate>
                 <q-input              
                            ref="autocomplete"              
                            v-model="user.address"              
                            filled              
                            label="Physical Address"              
                            hint="Your permanent address"              
                            :rules="[val => !!val || 'This field is required.']"              
                          />       </template>
      

      I’m getting error google is not defined in console. please check screenshot below

      address-issue.png
      I want this to give suggestion of addresses when anyone types anything without map.

      can anyone help me with this?

      Thanks

      posted in Framework
      R
      Rohit
    • q-select not displaying drop down

      Template code:
      <template>
      <q-select
      filled
      label=“Select Tags”
      v-model=“selectedTags”
      multiple
      :options=“tagsList”
      emit-value
      map-options
      @change=“filterTips”
      style=“width: 250px”
      />
      </template>

      & my computed property

       tagsList() {
       //this.tags is getting data from getter.js
        let result = [];      
        this.tags.forEach(tag=>{
          result.push({ label: tag.name, value: tag.tags_id });
        });
        //  result = list.map(tag => ({ label: tag.name, value: tag.tags_id }));
        console.log(result);
        return result;
      },
      

      & console.log(result) is giving me this

      (3) [{…}, {…}, {…}]
      0: {label: "First ", value: “1”}
      1: {label: “Second”, value: “2”}
      2: {label: “Third”, value: “3”}
      length: 3
      proto: Array(0)

      can anyone help me with this
      Thanks

      posted in Help
      R
      Rohit