Hello all, I have a repeater linked to a database which works fine and a button on the repeater linked to a lightbox which shows a location on a map from coordinates. When I test the page the location on the first container works and shows the location on the lightbox map but on the other containers it shows the same location as the first container.
How do I get the buttons on the containers within the repeater to link the destination on the map of the corresponding container. I know it half works because the map links to the longitude and latitude for that first item on the database but it wont link to the rest of the data on my database.
Any help would be really appreciated I have searched all over Corvid for a fix and tried all the codes from other members posts but I cannot seem to make it work for me.
This is the code in my Lightbox
export function dataset1_ready() {
let currentItem = $w(‘#dataset1’).getCurrentItem();
$w(‘#googleMaps1’).location = {
“latitude”: currentItem.latitude,
“longitude”: currentItem.longitude,
“description”: currentItem.businessName
}
}
Thanks
Hey Lunny,
It doesn’t look like you’re passing any information through to the lightbox about which map to display, so the map for the first container is only displaying coincidentally because it’s the first item in your database.
Using the onItemReady function I suggested to you last, you would pass info to the lightbox this way:
$item(‘#lightboxTrigger’).onClick(()=>{
let mapArr = [{lat: itemData.latitude}, {long: itemData.longitude}, {name: itemData.businessName}];
wixWindow.openLightbox(‘myLightbox’, mapArr);
} );
mapData here stands for the key of your database field that contains the map info.
Then in your lightbox, your code would look more like:
import wixWindow from ‘wix-window’;
$w.onReady(()=>{
let mapData = wixWindow.lightbox.getContext();
$w(’ #googleMaps1 ').location = {
“latitude”: mapData.lat,
“longitude”: mapData.long,
“description”: mapData.name,
}
} );
You don’t need a dataset for the lightbox this way.
Hi David
Thanks for sending that code, I have used the code but have had to change it a little to get rid of a couple of errors that came up on my page. This is what I have so far and I have one error left that says wixWindow is not defined. Can you please check out my code below?
Code on repeater
$w.onReady( function () {
//TODO: write your page related code here…
$w(‘#button7’).onClick(()=>{
let mapArr = [{lat: ‘itemData’.latitude}, { long : ‘itemData’.longitude}, {name: ‘itemData’.businessName}];
wixWindow.openLightbox(‘myLightbox’, mapArr);
} );
});
Code on Lightbox
import wixWindow from ‘wix-window’;
$w.onReady( function () {
//TODO: write your page related code here…
let mapData = wixWindow.lightbox.getContext();
$w(‘#googleMaps1’).location = {
“latitude”: mapData.lat,
“longitude”: mapData. long ,
“description”: mapData.name,
}
} );
When I tested the page it came up with an error message and wouldn’t load the lightbox.
Thanks for your help.
Sure thing. You need to make sure you’re importing the API’s you’re going to use…in this case wixWindow. You’ve done it in the lightbox but not in your repeater’s page. Additionally, you need to make sure you’re putting the repeater code in the repeater’s onItemReady, or else you’ll get errors because $item and itemData have not been defined.
Once those things are done, make sure to revert back to the code I gave you.
Thanks for explaining that David, I’m new to this so still trying to learn. The red dot I have now is on the #lightboxTrigger when i test the page the button doesn’t open the lightbox, am I missing something to be able to define the lightbox trigger?
I appreciate your help on this.
I have managed to make the button work, when I click through to my lightbox this is the warning and error I get, it doesnt seem to pick up the lat item in the code, how do I fix this?
Wix code SDK Warning: The latitude parameter of “googleMaps1” that is passed to the location method cannot be set to null or undefined.
Wix code SDK error: The latitude parameter that is passed to the location method cannot be set to the value . It must be of type number.
I’m assuming it’s because there are empty rows in your database. You can correct for it like this:
$item(’ #lightboxTrigger ').onClick(()=>{
if (itemData.latitude !== undefined && (itemData.longitude !== undefined)) {
let mapArr = [{lat: itemData.latitude}, {long: itemData.longitude}, {name: itemData.businessName}];
wixWindow.openLightbox(‘myLightbox’, mapArr);
}
} );
I’m still coming up with the same error messages, I have switched the lightbox code and moved longitude above latitude and I have the same error but instead for longitude. That to me suggests the GoogleMaps.location is not picking up the lat and long items and its not just a problem with latitude. I keep tweaking the code and changing it back again just to test out some options. I will keep working until I can get it to connect.
Try changing the array to
let mapArr = [itemData.latitude, itemData.longitude, itemData.businessName];
and changing location to
“latitude”: mapData[0],
“longitude”: mapData[1],
“description”: mapData[2]
I have changed that but now it comes up asking me to debug and open wjbew.js in developer tools, all that code goes beyond me. The error it stops at is JSON.parse but I’m not sure what to do with that, when i search for wjbew.js it comes back to the code we have written.
It is possible to create a Wix code with no latitude no longitude, just the address our clients input and clicking on them appears the map. Thank you