Hi,
I have the following components on a Dynamic Page:
-
Table (ID = table1 , populated by dynamicDataset , title contains names of places )
-
Google Map (ID = googlemap1 , should show the location of the Current Item title)
Im trying to show the location of the current item title ( .getCurrentItem().title ) on the map when its displayed in the viewable part of the current window ( onViewportEnter ).
Using this example as a stating point: How to Use Google Maps Services in Wix Code
And this Places API Guide
I have google API and enabled the Places API.
-
I created a web module (backend) file named gapi.jsw
-
In that file, web modules which will be used to call the Google Maps online service functions.
import {fetch} from 'wix-fetch';
const key = "Crazy-long_Google_API-key"; // My own API key is here
// Retrieve details of the selected location
const dpart1 = "https://maps.googleapis.com/maps/api/place/details/json?";
const dpart2 = "&key=";
// this function is triggered when clicking on a suggestion list repeater item
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();
}
});
}
3. In the Map page i added the following code,
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
import {details} from 'backend/gapi';
//this function is triggered when the map is displayed in the viewable part of the current window (onViewportEnter)
export function location_title() {
let place_id = $w('#dynamicDataset').getCurrentItem().title;
set_details(place_id);
}
4. The set_details( ) function need to be adjusted to my needs. Since am using Place and not address (as in the example) i assume the Fields need to be changed from address_components (as country or city) to geometry/location. Furthermore, the example using a text input and repeater which i don't. Here is the original code from the link above with :
/* This function calls the details() web module to retrieve the details (city, country, utc, etc) of the selected or saved location. */
function set_details(val) {
details(val).then(function(resp) {
// find the city (locality) and country of the location
let place = resp.result;
var filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("country");
});
var country = filtered_array.length ? filtered_array[0].long_name: "";
filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("locality");
});
var locality = filtered_array.length ? filtered_array[0].long_name: "";
console.log("details: " + locality);
let name = place.formatted_address;
let id = place.place_id;
let utc = place.utc_offset;
let lat = place.geometry.location.lat;
let lng = place.geometry.location.lng;
// save the details of the location with wix-storage
local.setItem("place_city", name);
local.setItem("place_lat", lat);
local.setItem("place_lng", lng);
local.setItem("place_utc", utc);
local.setItem("place_id", id);
$w("#input1").value = name; // set input field to location
// array of location detail items for the repeater
let detailsList =
[
{
"_id": "1",
"text3": "place name",
"text4": name
},
{
"_id": "2",
"text3": "latitude",
"text4": "" + lat
},
{
"_id": "3",
"text3": "longitude",
"text4": "" + lng
},
{
"_id": "4",
"text3": "utc",
"text4": "" + utc
},
{
"_id": "5",
"text3": "place id",
"text4": id
}
];
// set the details repeater data and show it
$w("#repeater2").data = detailsList; // add data to our repeater
$w("#repeater2").show();
});
}
Will appreciate your help in adjusting the code for my needs.
THANX : )