Hi, how can I link the map to my database so that a different map always appears on a dynamic page?
Hi Lukáš,
Welcome to the Wix Code forums.
Read the article Adding Google Maps to learn how to add a Google Map component to your page. In the simple case, you can Add an Address to Google Maps . However, in your case, you will want to add the address programmatically.
You will need to keep the location information in your database collection. Then, using the location property of $w.GoogleMap , you can set the map’s location to the location data.
If you want to do geolocation lookups and other map functions, look at the forum post How to Use Google Maps Services in Wix Code and the Google Maps API web services online docs.
Good luck and have fun,
Yisrael
Thank you very, much, now work it … but I have a question how to insert the latitude and longitude into the input form? To automatically add by place name
If you want to use place names, you can either save the latitude and longitude in the database along with the place name, or you’ll have to do a Google Places query to get the latitude and longitude. You can do a query based on location name, or a more reliable method would be by Location ID. You can refer to the forum post How to Use Google Maps Services in Wix Code and the Google Maps API web services online docs to learn how to do these queries.
Pls, can you give me a simple example? When I select a location on a map, I save my data (latitude, longitude) to my database
Hi Lukas,
I’ve been looking out for a solution to a similar thing. I only found conversations and code examples for setting the location on a google map element, but none for getting the location and saving it to my collection. Now, wix gives you a snippet for it and I used it to fill the latitude and longitude coordinates in my collection, one less problem. Nonetheless, I can’t yet find a way to move the marker in the google map, and my users need to do that before saving the location in the database. I will paste the code that does the last thing (saving those coordinates in the database), but that is just half the thing I believe you want (and me too). Here it is:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
$w("#CasasVdataset").onReady(() => {
let myLocation = $w("#googleMapsSHInput").location;
let locationLatitude = myLocation.latitude;
let locationLongitude = myLocation.longitude;
let locationDescription = myLocation.description;
$w("#CasasVdataset").setFieldValues({
"latitude": locationLatitude,
"longitude": locationLongitude,
"description": locationDescription
});
});
});
Just replace:
#CasasVdataset: with your dataset ID (remember dataset not database/collection name)
#googleMapsSHInput: with your google map ID
“latitude”, “longitude” and “description”: with the fieldkeys you have for each field (fieldkey is the property that wix doesn’t let you change, not the one you can change which is the field name).
Everything else I copied exactly from the example in wix code, so I think you won’t need to change that neither (btw I’m not an expert coding).
As you can see, I put this code inside the page’s onReady function, and inside that I created a onReady for the dataset too, according to wix (and what I understood) that is the best way to use those functions.
I hope this helps you. Now, regarding the steady-marker issue, I think that the solution lies somewhere in Google Maps API documentation. But, if you (or someone reading this) find a way to move that holy marker manually (or some workaround) please share it 
Take a look at the Example: Using the Places API from Google Maps services to find out how to do various types of location lookup. The results from one of the lookups can then be saved to a database collection.
Hey Yisrael, I read it and sounds like a viable solution for what I need, tbh I’m not fond of back-end code, but this is a must so I’ll definitely try it out, thanks for the tip!
Hi, Thanks. This has helped me.
However, i’m not sure how to reference the correct field in my dataset with the longitude and latitude coordinates. You talk about a datasetID. I’m not sure where to get this, and once you have it, how do you referance the correct data in that dataset. Thanks.
The below is what I have so far.
export function BoxLocationmap_viewportEnter(event) {
//Add your code for this event here:
$w(‘#BoxLocationmap’).show()
$w(‘#BoxLocationmap’).location={
“latitude”: #dataset=FeatuedBoxs, entrylatitude,
“longitude”: -122.387301,
“description”:“Wix Office”
};
}
}
@joshwait Not sure what you’re trying to do with the dataset, or even if you have one on your page. If you have a dataset connected to your location, you can retrieve the current selected record and appropriate fields something like this:
let item = $w("#myDataset").getCurrentItem();
let lon = item.lon;
let lat = item.lat;
You should review the documentation about datasets to see how to retrieve data from a database collection using a dataset.
@yisrael-wix Thanks for this.
I have started a new thread as is may get confusing here. Would you be able to have a look?
Thankyou again:
Can somebody help me to solve my problem? I've placed a google map on my website and linked with dataset which is including map address and map link data. It is working very well on preview mode. But it doesn't appear on live site. Please see the screenshot below.The first one is view from live site and the second is preview.
Can somebody help me to solve my problem? I've placed a google map on my website and linked with dataset which is including map address and map link data. It is working very well on preview mode. But it doesn't appear on live site. Please see the screenshot below.The first one is view from live site and the second is preview.
- Surely you wanted to say, that the first pic is from SANDBOX and the second one is from LIVE.
- Your problem could be, that you have forgotten to SYNC your SANDBOX & LIVE.
Do a synchronisation of these 2.
