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

    Google auto populate address without map

    Framework
    autocomplete autopopulate google api google maps withoutmap
    4
    14
    4045
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      Rohit last edited by Rohit

      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

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Rohit last edited by dobbel

        @Rohit as I recall you cannot use google maps functions without an actual on screen

        what do you want to do geocode an address?

        1 Reply Last reply Reply Quote 0
        • R
          Rohit last edited by

          @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

          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @Rohit last edited by dobbel

            @Rohit

            What you want is 2 different things,

            1. display an address as a marker on a map
            2. geolocate an address

            I would first try if this Vue library for google maps:

            https://github.com/diegoazh/gmap-vue#readme

            and try one of the examples to display a marker:

            https://github.com/diegoazh/gmap-vue/tree/master/packages/gmap-vue/examples

            if geolocation is not included/working I can tell you how but it will be more complicated.

            btw found this vue repo for geolocation:

            https://github.com/PDERAS/vue2-geocoder

            1 Reply Last reply Reply Quote 0
            • R
              Rohit last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • R
                Rohit last edited by Rohit

                @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

                dobbel 1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @Rohit last edited by

                  @Rohit

                  i found this:

                  https://github.com/yariksav/vue-google-places

                  1 Reply Last reply Reply Quote 0
                  • R
                    Rohit last edited by Rohit

                    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.

                    1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel last edited by

                      I use yarn for local project packages and npm for globals as advised by the quasar team

                      1 Reply Last reply Reply Quote 0
                      • R
                        Rohit last edited by Rohit

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • R
                          Rohit last edited by Rohit

                          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

                          dobbel 1 Reply Last reply Reply Quote 1
                          • dobbel
                            dobbel @Rohit last edited by

                            @Rohit Great work I am going to try it out!

                            1 Reply Last reply Reply Quote 0
                            • N
                              Nusry last edited by Nusry

                              This article maybe helpful for you on integrating google maps in quasar

                              https://nsrtechx.com/quasar-google-maps-with-places/

                              1 Reply Last reply Reply Quote 1
                              • N
                                nulele last edited by nulele

                                For anybody has trouble showing the dropdown list on cordova app, the problem for me was the css. I solved with this instruction:

                                .pac-container {
                                z-index: 9999 !important;
                                }

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post