Reputation: 431
In my e-commerce project, I want to use google maps api to insert user's shop location.
I used google cloud functions to insert the latitude, the longitude, and the address.
Now I could insert the data in the collection called locations. But I want to attach those information to the user profile collection.
So how can I insert latitude, longitude, and user address into the user profile collection?
This is my index.js
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();
});
}
});
Vue.js
<template>
<div id="app" class="container mt-5">
<b-form @submit.prevent="handleFormSubmit">
<b-row>
<b-col md="6">
<b-form-group label="Street">
<b-form-input v-model="formData.street"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col md="3">
<b-form-group label="City">
<b-form-input v-model="formData.city"></b-form-input>
</b-form-group>
</b-col>
<b-col md="3">
<b-form-group label="State">
<b-form-input v-model="formData.state"></b-form-input>
</b-form-group>
</b-col>
<b-col md="3">
<b-form-group label="Zip">
<b-form-input v-model="formData.zip"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
<GmapMap
:center="{lat:13.756331, lng:100.501762}"
:zoom="4"
map-type-id="roadmap"
style="width: 100%; height: 500px; margin-top:60px;"
>
<div>
<GmapMarker
:clickable="true"
@draggable="true"
@click="center=m.position"
/>
</div>
</GmapMap>
</div>
</template>
<script>
import axios from 'axios';
// firestore
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
let id = String(id);
export default {
name: "MapFirestore",
data: () => ({
savedLocations: [],
formData: {
street: "",
city: "",
state: "",
zip: "",
},
}),
firestore(){
const user = fireApp.auth().currentUser;
return {
formData: db.collection('Profile').doc(user.uid),
}
},
methods: {
async handleFormSubmit() {
//validate form
if (
!this.formData.street ||
!this.formData.city ||
!this.formData.state ||
!this.formData.zip
) {
alert("You must add a full address!");
return;
}
//Make request
let address = `${this.formData.street}, ${this.formData.city}, ${this.formData.state} ${this.formData.zip}`;
let { data } = await axios.post(
"https://us-central1-geocodeing-58a86.cloudfunctions.net/geocodeAddressAndSave",
{
address: address,
}
);
if (data === "No Results") {
alert("No results for address");
return;
}
//massage data to fit our schema
let obj = {
address: data.address,
geoPoint: {
latitude: data.geoPoint._latitude,
longitude: data.geoPoint._longitude,
},
};
//add to saved locations to update map
this.savedLocations.push(obj);
//clear form
this.formData.street = "";
this.formData.city = "";
this.formData.state = "";
this.formData.zip = "";
},
},
};
</script>
I want to insert the data into this collection called Profile.
Upvotes: 0
Views: 418
Reputation: 431
I changed my vue code.
var user = firebase.auth().currentUser;
db.collection('Profile').doc(user.uid).update({
address: data.address,
latitude: data.geoPoint._latitude,
longitude: data.geoPoint._longitude,
});
Upvotes: 0
Reputation: 599341
You'll need to know the UID of the user, and then update the user profile with that. If this is a secure operation (it likely is), you'll need to pass the UID in a secure way. See: Getting user info from request to Cloud Function in Firebase
Once you have the UID, you can update the profile document with something like:
db.collection('profiles').doc(uid).update({ ... });
Upvotes: 1