Google Maps Component for custom events page

Ask the community
,
1

Since this has not been released yet, even though it is in the coming soon, I was looking for an alternative. My client wants a little more control over how event images etc are displayed. Since the events db has been made available I can finally provide it! However, the map display is an issue.

I used this tutorial:

my jsw stayed exactly the same:

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

}

I modified my page code. While I have no errors in my code all that comes up is independence and ann arbor. 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;}

exOf("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,
 
                    };

        }
    });
})
2

Does anyone know how to proceed with this?

3

Can someone give me an answer please?