How to bind data values to Google Maps API

Maflec 0
Viewed 33

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 class="col-md-12 m-0 p-0">
    <input label="street" v-model="addressInfo.streetName" @input="emitUpdateEvent" icon="fas fa-road"
                  class="col-md-4"/>
    <input label="numberAbbr" v-model="addressInfo.streetNumber" @input="emitUpdateEvent" icon="fas fa-hashtag"
                  class="col-md-2"/>
    <input label="floor" v-model="addressInfo.floor" @input="emitUpdateEvent" icon="fas fa-layer-group"
                  class="col-md-2"/>
    <input label="door" v-model="addressInfo.door" @input="emitUpdateEvent" icon="fas fa-door-closed"
                  class="col-md-2"/>
    <input label="placeName" v-model="addressInfo.placeName" @input="emitUpdateEvent" icon="fas fa-road"
                  class="col-md-4"/>
    <input label="postalCode" v-model="addressInfo.postalCode" @input="updatePostalCode" icon="fas fa-city"
                  class="col-md-2"/>
    <input label="city" v-model="addressInfo.city" @input="emitUpdateEvent" icon="fas fa-city" class="col-md-3"/>
  </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));
  }
google-maps api vue.js javascript
3 Answers

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`)
Mariusz Malek0 
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));
  }
John Zwarthoed0

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));
  }
},
Russ Deneychuk0
Related