For my e-commerce project, I am looking to utilize the Google Maps API to input the location of a user's shop.
I have successfully utilized Google Cloud Functions to insert the latitude, longitude, and address data.
Currently, the data can be inserted into a collection named locations. However, my goal is to link this information to the user profile collection.
How can I add latitude, longitude, and user address details to the user profile collection?
Here is the code included in my index.js file:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const Firestore = admin.firestore;
const db = Firestore();
const axios = require("axios");
const cors = require("cors")({
origin: true
});
const googleMapsApiKey = "AIzaSyAnp23T2tbYj9Ho8uYmcE6W4KnbvZKlEjc";
exports.geocodeAddressAndSave = functions.https.onRequest(async (request, response) => {
try {
let address = encodeURI(request.body.address);
let { data } = await axios.get(
`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${googleMapsApiKey}`
);
if (data.status !== "OK") {
//no results
return cors(request, response, () => {
response.status(200).send("No Results");
});
}
const geocodedLocation = data.results[0];
const objGeolocation = {
address: geocodedLocation.formatted_address,
geoPoint: new admin.firestore.GeoPoint(geocodedLocation.geometry.location.lat, geocodedLocation.geometry.location.lng)
}
//firebase
await
db.collection('locations').add(objGeolocation);
return cors(request, response, () => {
response.status(200).send(objGeolocation);
});
} catch (error) {
return cors(request, response, () => {
console.log(error);
response.status(500).send();
});
}
});
In my Vue.js code:
<template>
<!-- Vue template content -->
</template>
<script>
// Relevant JavaScript code here
</script>
I aim to store this data within the Profile collection. https://i.sstatic.net/BgvGI.png https://i.sstatic.net/MdGyp.png