How to bind data values to Google Maps API-CodePudding

I am doing some geocoding in my Vue application using the Google Maps API. In the documentation they show different ways of getting coordinates for addresses. eg.

https://maps.googleapis.com/maps/api/geocode/json?address=Washington&key=YOUR_API_KEY

But what if I want to use an address that I already store in my application? Right now I have fields that display street, street number, zip code and city. All these are fetched from my own database. Is there some way I can bind these to the API?

<template>
  <b-form-row v-else >
    <input label="street" v-model="addressInfo.streetName" @input="emitUpdateEvent" icon="fas fa-road"
                  />
    <input label="numberAbbr" v-model="addressInfo.streetNumber" @input="emitUpdateEvent" icon="fas fa-hashtag"
                  />
    <input label="floor" v-model="addressInfo.floor" @input="emitUpdateEvent" icon="fas fa-layer-group"
                  />
    <input label="door" v-model="addressInfo.door" @input="emitUpdateEvent" icon="fas fa-door-closed"
                  />
    <input label="placeName" v-model="addressInfo.placeName" @input="emitUpdateEvent" icon="fas fa-road"
                  />
    <input label="postalCode" v-model="addressInfo.postalCode" @input="updatePostalCode" icon="fas fa-city"
                  />
    <input label="city" v-model="addressInfo.city" @input="emitUpdateEvent" icon="fas fa-city" />
  </b-form-row>
</template>

I wish to do something like this :

https://maps.googleapis.com/maps/api/geocode/json?{ addressInfo.streetName   addressInfo.streetNumber   addressInfo.zipCode   addressInfo.postalCode etc. }&key=YOUR_API_KEY

I already made a field called "coordinates" where I store the data.

  getGeoLocationForUnit() {
    axios.get('https://maps.googleapis.com/maps/api/geocode/json?address=Washington&key=mykey')
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }

CodePudding user response：

Did you try something like that? I mean to try to add dump address with a comma if this will work then you only should create computed for property map data.

axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=Washington,Street,Number&key=mykey`)

Example:

computed: {
 getFullAddress() {
  return this.addressInfo.streetName   ','   this.addressInfo.streetNumber   ','   this.addressInfo.zipCode   ','   this.addressInfo.postalCode;
 }
}

Something like that:

axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=`   this.getFullAddress   `&key=mykey`)

CodePudding user response：

getGeoLocationForUnit() {
    const address = `${this.addressInfo.streetName} ${this.addressInfo.streetNumber} etc..`;
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=mykey`)
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }

CodePudding user response：

What you're looking for is template literal strings. String that are wrapped in backticks instead of quotes, simple example:

const name = 'John Smith';

const greeting = `Hello ${name}` // Outputs 'Hello John Smith"

For your use case you can even break address info string creation to separate computed property, and that will make

data: () => ({
  baseApiUrl: 'https://maps.googleapis.com/maps/api/geocode/json?',
}),
computed: {
  addressString() {
    const { streetName, streetNumber, zipCode, postalCode } = this.addressInfo
    return `${streetName} ${streetNumber}, ${zipCode} ${postalCode}`
  }
},
methods: {
  getGeoLocationForUnit() {
    const url = `${baseApiUrl}${addressString}&key=mykey`;
    axios.get(url)
      .then(result => {
        this.coordinates = result.data
      })
      .catch(error => console.error(error));
  }
},