Google maps dynamic page

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
};
} );
} );

1 Like

Hi,
Code looks OK… any console errors?
Can you please make sure your getting an item with longitude and latitude from the DB?
Can you try logging the ‘currentItem’ ?

Liran.

error sys [Warning] Wix code SDK Warning: The longitude parameter that is passed to the location method cannot be set to null or undefined. (wixcode-worker.js, line 1)
I have it as a number in above DB, is that right?

I’m sorry cn u give an example to do console logs on my code? i have read the article but cant figure it out. Thanks!

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.

OK thanks, I have found the issue. Although the Longitude was named thusly, the field key was ‘longtitude’. All working great now thank you!

$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.

Did you guys figure this out. I have got stuck at the same spot.

Question, what are you using for the input item for the map on the page?

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

And is something there working in the backend? I implemented the code but it doesnt do anything at all. My fieldkeys are correct too.

I’m interested as well in hearing of a solution…! Thanks.

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,
       };
   } );
} );

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

You have to have, “longitude”, “latitude” and “title” in your database. Can you show me your code? dawd.jobe.

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:

#map { height: 200px; width: 100%; }

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 :slight_smile:

Sorry dawd.jobe , I cannot help you with the HTML Code.

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.

you need to set latitude and longitude as a Number in your dataset

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

The map is showing, but the location seems to be incorrect. Can you post your code?