Recently, I've been working on geocoding within my Vue application by utilizing the Google Maps API. Within the API documentation, they provide various methods for obtaining coordinates based on addresses. For example:
https://maps.googleapis.com/maps/api/geocode/json?address=Washington&key=YOUR_API_KEY
But what if I want to use an address that is already stored in my application? Currently, I have fields displaying street, street number, zip code, and city - all retrieved from my own database. Is there a way to connect these fields with 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 would like to achieve something along the lines of:
https://maps.googleapis.com/maps/api/geocode/json?{ addressInfo.streetName + addressInfo.streetNumber + addressInfo.zipCode + addressInfo.postalCode etc. }&key=YOUR_API_KEY
Furthermore, I have created a field labeled "coordinates" where I'm storing this 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));
}