Hey guys, trying to put a map on my dynamic single item page which changes for every property listed.
This is my code so far but not working. Any help would be greatly appreciated!
I have read the api and also the other posts here and still stuck. Please help as I want to get this site out asap!
$w.onReady( function () {
$w("#dynamicDataset").onReady( () => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
$w("#googleMaps1").location = {
"latitude": currentItem.latitude,
"longitude": currentItem.longitude,
"description": currentItem.mapdescription
};
} );
} );
I have a WIX website for rental properties (vivaagusto.com). I am converting it to work off dynamic pages (to reduce the maintenance overhead in adding new properties i.e. to add a new property I only need to add items to the properties database).
The bulk of it is converted, but I am stumped by the embedded google map. There does not seem to be a way to do this through WIX directly.
I find this frankly astonishing since anybody working with property would want to do this, and really it ought to be trivial to pull the latitude and longitude out of a database.
Looking online, there are lots of people having the same problem. (This is how I ended up here). Everyone seems to be solving this problem by coding in Corvid? A lot of people seem to be struggling with the code. I´m not surprised as WIX is "sold" on the idea that you can set up websites without having coding skills. It is in fact why I chose WIX.
The piece of code that is provided by Meia Ponta Capezio is only a few lines which I could cut and paste, but I have no idea where to cut and paste it to. Is there a Corvid tutorial for people who actually don´t want to code, but just want to cut and paste a sample to get something going and forget about it? Corvid for Dummies? Or should that be Corvid for Lazy Dummies?
Any help would be much appreciated.
Hello
I have a similar Dynamic page, but some times we don't have a the values for
"latitude": currentItem.latitude,
"longitude": currentItem.longitude,
How would we create an if statement to hide/remove the google map?
I'm using this code and it works great when I have the values.
$w.onReady( function () {
$w("#dynamicDataset").onReady( () => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
$w("#googleMaps1").location = {
"latitude": currentItem.latitude,
"longitude": currentItem.longitude,
"description": currentItem.mapdescription
};
} );
} );
Any help would be appreciated.
Update: it's working now! : ) For any others who are wondering the solution, just use the code that Meia Ponta Capezio kindly provided above. Thank you, Meia.
Hi Meia,
Sure, please see below. The funny thing is the map was working just fine until last week when I accidentally erased my code...so just trying to figure it out again. Suggestions appreciated!
Thanks,
Josh
$w.onReady( function () {
$w("#dynamicDataset").onReady( () => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
$w("#googleMaps1").location = {
"latitude": currentItem.latitude,
"longitude": currentItem.longitude,
"description": currentItem.mapdescription
};
} );
} );
Hi!
I added the code recommended above to my single item dynamic page....
https://www.grahameschocolateguide.com/Chocolatiers/Acalli
....but the Google map is not functioning.
Could you possibly take a look and help?
Thanks!
Josh
you need to set latitude and longitude as a Number in your dataset
Strange, i think that a comment is missing here... Someone commented also a few hours ago. Oh okay, thank you nonetheless for your effort, Meia.
Sorry dawd.jobe, I cannot help you with the HTML Code.
I got "mapdescription" instead of "row" for the column in the database but thats no problem, isnt it? The page code accepts that too.
Okay, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 200px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: uluru
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=(myAPIkey)&callback=initMap">
</script>
</body>
</html>
I think the problem is that i have the map already centered in my html code and i defined no markers.
I hope you can help me with this :)
You have to have, "longitude", "latitude" and "title" in your database. Can you show me your code? dawd.jobe.
Hey Meia,
thanks for your reply! The command "location" is still undefined, says WIX. Is location also an entry within your database?
And how did you customize your html code? Because i believe that this is where the problem lies for me.
Greetings, Dawd
This is the code I use and it works for me. Remember that you have to have those Items on your Database Collection.
$w.onReady( function () { $w("#dynamicDataset").onReady( () => { let currentItem = $w("#dynamicDataset").getCurrentItem(); $w("#googleMaps1").location = { "latitude": currentItem.latitude, "longitude": currentItem.longitude, "description": currentItem.title, }; } ); } );
I'm interested as well in hearing of a solution.....! Thanks.
And is something there working in the backend? I implemented the code but it doesnt do anything at all. My fieldkeys are correct too.
Hey guys,
is this code supposed to show a marker in the end?
And i dont get my map centered to the right place.
Furthermore do i have to change the information "dynamicDataset"? Seems to be a universal thing.
Greetings, Dawd
Question, what are you using for the input item for the map on the page?
Did you guys figure this out. I have got stuck at the same spot.
$w.onReady(function () {
$w('#dynamicDataset').onReady(() => {
let location = $w('#dynamicDataset').getCurrentItem().wholeAddress;
let addressSummary = $w('#dynamicDataset').getCurrentItem().title;
$w('#googleMaps1').location = {
latitude: location.latitute,
longitude: location.longitute,
description: addressSummary
};
});
});
I have the same issue here: [Warning] Wix code SDK Warning: The latitude parameter that is passed to the location method cannot be set to null or undefined. And I checked the field keys all match.
OK thanks, I have found the issue. Although the Longitude was named thusly, the field key was 'longtitude'. All working great now thank you!
So the problem, according to your console, is that you're not giving longitude.
Note that in your DB, only the second record has longitude and latitude.
Please fix the data and try again.