Hey everyone,
So I’m trying to create a page where users can set a location on the map, fill out a comment for that location, and submit it to our database. Any ideas on where to begin? I’ve created a database with Name, Email, Phone, Comment, etc., and a map on the page, but how to get users to be able to interact and put a location on the map, let alone submit the map data to the datasheet, is a little beyond me. Any thoughts?
The rest of the data input works fine, but I’m not sure how to let users add and submit map data, or if it is possible.
Thank you all for the help!
Connor
Take a look at the Wix Code Google Maps example . It shows how to pass data to the map using. To allow the users to interact, you will need to add event handlers to the Google Map code in the HtmlComponent. Refer to the Google API links referenced in the example article for more information.
Hey!
I was so intrigued by your wish that I had to build it. I wrote an article with all code here:
https://uggadugg.wixanswers.com/en/article/grab-address-from-google-maps-into-your-data-collections
Hey @andreas-kviby ,
Thank you for the awesome breakdown of how you made this work, it’s very helpful! The only issue I am running into is the map location box above the map won’t populate with the clicked address. I’ve used the HTML you created, only changed the starting coordinates and removed the search for cafe’s, but I’m still having an issue with users clicking on the map and populating the input box.
I’m not getting any error messages, so I’m not sure what I’ve missed, I’m worried I missed something in the Wix code, maybe placed them in the wrong spot? Here’s an example of the code I’ve got on Wix:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
//TODO: write your page related code here…
$w(“#html1”).onMessage((event) => {
console.log(event.data);
})
$w(“#html1”).onMessage((event) => {
$w(“#input4”).value = event.data;
})
});
For the HTML code I used the code from your article. Wondering if you may have any idea what I may need to change, or where to start looking to address the issue.
Thanks again for all your help, I really appreciate it!
Connor
On use one as the code below shows you. You can’t use two onMessage handler, only the first will work.
$w.onReady(function () {
//TODO: write your page related code here...
$w("#html1").onMessage((event) => {
console.log(event.data);
$w("#input4").value = event.data;
})
});
Did you update the API KEY from Google Places API?
@andreas-kviby
I was using a Maps API Key rather than Places, that was the issue! Last Issue that I am facing is when I submit the data. I linked the input box that the address fills up to a database field titled “Location (set as Text)”. All the rest of the data populates (like name, phone…) when the submit button is clicked but the location is left blank in the database. Any Ideas?
How do I view this article? It will not let me without a login for your organization.
Can’t sign in to the site. Can you please help me?
