I have a dynamic item page that is pulling information from a dataset (which is obvious), and within that dataset I have a column that has physical addresses.
I’ve included the google map app on the page, can I code every individual dynamic item page to show the corresponding address?
Many thanks !
Hi,
this code works with me.
In the backend file, make this .jsw file
this file has a function takes the address and return the latitude, longitude and more…
import {fetch} from ‘wix-fetch’;
const key = “AIzaSyCEzAmnS6GFBmXbNqLePd4d2TLsgmeGdZg”;
const GEOKEY = “AIzaSyCI7NI4E3sNKbzQKZkAbz-ZTBbgqEiMDaY”;
const apart1 = “https://maps.googleapis.com/maps/api/place/autocomplete/json?”;
const apart2 = “&types=address&key=”;
export function autocomplete(string) {
let input = “input=” + string;
let url = apart1 + input + apart2 + key;
return fetch (url, {method: ‘get’}).then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
});
}
const dpart1 = “https://maps.googleapis.com/maps/api/place/details/json?”;
const dpart2 = “&key=”;
export function details(id) {
let placeid = “placeid=” + id;
let url = dpart1 + placeid + dpart2 + key;
return fetch (url, {method: ‘get’}).then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
});
}
const geocode1 = “https://maps.googleapis.com/maps/api/geocode/json?address=”;
const geocode2 = “&key=”;
export function geocodeAddress(AddressName) {
let geoUrl = geocode1 + AddressName + geocode2 + GEOKEY;
return fetch (geoUrl, {method: ‘get’}).then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
});
}
in the page that has the map…
import {geocodeAddress} from ‘backend/gapi’;
and use this (change the address when you call the function):
geocodeAddress(fullAddress).then((json) => {
// fills in remainder of address from query
for(var i in json.results[0].address_components){
if (JSON.stringify(json.results[0].address_components[i].types).indexOf(“administrative_area_level_1”) !== -1)
{ var state = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf(“locality”) !== -1)
{ var city = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf(“street_number”) !== -1)
{ var street = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf(“route”) !== -1){
if (street === undefined )
{street= json.results[0].address_components[i].long_name;} else
{street = street + " " + json.results[0].address_components[i].long_name;}}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf(“postal_code”) !== -1)
{ var zipcode = json.results[0].address_components[i].long_name;}
var mapaddress = street + ', ’ + city + ', ’ + state + ', ’ + zipcode;
$w('#propertyLocation').location = {
“latitude”: Number(json.results[0].geometry.location.lat),
“longitude”: Number(json.results[0].geometry.location.lng),
“description”:mapaddress,
};
}
});
wow this worked perfectly. Brilliant!
Hi Ahmd,
Thank you for the script.
Can you help me to get this working for my site?
I put this function on “onViewporEnter” of my page that has the google map.
Thanks
Saeid
Hey, you need to change them.
“propertylocation” should be changed to the id of your map component.
“fullAddress” should be replaced with your input as a string.
Ahmd.
Thanks Ahmd,
I did what you said, but still does not work. I do not know its because I have a mistake in the code or the style of address I have is different!
This is the preview of my page:
you put the address as “#text1”, which is not address…
could you tell where do you get the address from ?
I guess you’re trying to make this: $w(‘text1’).text not “#text1”.
You are the best Ahmd.
Thanks
You’re welcome.
Happy to help!
@ahmdjsalhi Hi, I am new to this, but you’ve been a huge help. I am at this last critical stage of extracting text from one of my items on my page. It’s a text element that retrieves an address from my database called text26. I can’t seem to retrieve the text from it though. Please advise, code is below:
ghorbani, how did you retrieve the text from #text1 within the geocodeAddress(?
I am doing this because my client wants more control over the events images.
I plan to make dynamic pages for all of events components now that I have access to the database.
I followed the above and have no errors in my code but the address change is a completely random different state, city zip. please help:
import {geocodeAddress} from 'backend/gapi';
$w.onReady( function () {
$w("#dynamicDataset").onReady( () => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
$w("#locname").text =currentItem.locationName
$w("#address").text =currentItem.locationAddress
});
geocodeAddress($w("#locname")& $w("#address")).then((json) => {
// fills in remainder of address from query
for(var i in json.results[0].address_components){
if (JSON.stringify(json.results[0].address_components[i].types).indexOf("administrative_area_level_1") !== -1)
{var state = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf("locality") !== -1)
{var city = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf("street_number") !== -1)
{var street = json.results[0].address_components[i].long_name;}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf("route") !== -1){
if(street === undefined )
{street= json.results[0].address_components[i].long_name;} else
{street = street + " " + json.results[0].address_components[i].long_name;}}
if (JSON.stringify(json.results[0].address_components[i].types).indexOf("postal_code") !== -1)
{var zipcode = json.results[0].address_components[i].long_name;}
var mapaddress = street + ', ' + city + ', ' + state + ', ' + zipcode;
$w('#googleMaps1').location = {
"latitude": Number(json.results[0].geometry.location.lat),
"longitude": Number(json.results[0].geometry.location.lng),
"description":mapaddress,
};
}
});
})
Hi Ahmd, thanks for this. However, my other functions (see below) don’t work when trying to import the geocodeaddress on the page. Could you please help?
$w.onReady( function () {
$w(“#dynamicDataset”).onReady(() => {
populateCalculatedFields();
} );
$w(“#dynamicDataset”).onCurrentIndexChanged( (index) => {
populateCalculatedFields();
} );
} );
function populateCalculatedFields() {
const currentItem = $w(“#dynamicDataset”).getCurrentItem();
$w(“#mainInfoDisplay”).text = currentItem.mainInfo;
$w(“#textPrice”).text = currentItem.priceFormat;
}
Hi Ahmd,
Thank you for all you have posted. I was wondering if you know how to do the following?
I’m trying to link a database with Google Maps, and have the elements in a repeater change depending on what is displayed on the map?
I currently have real estate listings on the left, which is scrollable. Then I have a pinned map on the right. I would like the listings on the left to display on the map. Also, I would like the listings on the left to change depending on the area of the map.
I would also like to filter this database with a search and City dropdown, and have the repeater and map respond.
I’m using your code to display the listing’s title(address) on a map but I can’t get multiple addresses to show up. The map is combining all the addresses in the repeater and showing a random location.
For reference. I want my page to function similar to Zillow: https://www.zillow.com/homes
Any help would be much appreciated. Thanks in advance!
See imaged below.
did you ever solve this please?
I am getting a random address in Michigan. Could you please tell me if im doing anything wrong with my code?
please help me
i need code if longitude and latitude not available in database so my restaurant google map not show
Sorry for reviving an old thread, but i am facing the exact same issue as you @alexwforbes . Did you manage to find out how to extract the address from your #text26 element?
