copyOfMain.js

const STORE = {
    mapId: 0,
    lat: 0,
    lon: 0,
    categoriesSettings: {
        url: 'https://api.foursquare.com/v2/venues/categories',
        data: {
            client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
            client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
            v: '20180823'
        },
        dataType: 'jsonp',
        type: 'GET',
        success: pushCategories
    },
    geoLocateSettings: {
        url: 'https://maps.googleapis.com/maps/api/geocode/json',
        data: {
            latlng: returnLatLon,
            key: 'AIzaSyDiXUZ7Xr5xmORnIYMRrFh5-Y3HnnMzBc8'
        },
        dataType: 'json',
        type: 'GET',
        success: showGeoLocatedAddress
    },
    foursquareSearchSettings: {
        url: 'https://api.foursquare.com/v2/venues/search',
        data: {
            client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
            client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
            v: '20180823',
            limit: 10,
            radius: 10000,
            intent: 'browse',
            near: `${$('input[type=address]').val()},${$('input[type=city]').val()},${$('input[type=state]').val()},${$('input[type=zip]').val()}`,
            query: `${$('input[type=search]').val() === undefined ? '' : $('input[type=search]').val()}`,
            categoryId: `${$('select[type=dropdown]').val() === 'all' ? '' : $('select[type=dropdown]').val()}`
        },
        dataType: 'jsonp',
        type: 'GET',
        success: renderResponse
    }
};
const FOURSQUARE_SEARCH_URL = 'https://api.foursquare.com/v2/venues/search';
const FOURSQUARE_VENUE_URL = 'https://api.foursquare.com/v2/venues';

// page load events and click events handling
$(event => {
    getCategoriesApiResponse(pushCategories);
    $('#submit').on('click', searchForResults);
    $('#locate').on('click', geoLocateUser);
});

function geoLocateUser() {
    event.preventDefault();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(reverseGeoLocateApi);
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

function reverseGeoLocateApi(position) {
    STORE.lat = position.coords.latitude;
    STORE.lon = position.coords.longitude;
    $.ajax(STORE.geoLocateSettings);
}

function returnLatLon () {
    return `${STORE.lat},${STORE.lon}`;
}

function showGeoLocatedAddress(response) {
    let houseNum = response.results[0].address_components[0].short_name;
    let roadName = response.results[0].address_components[1].short_name;
    let cityName = response.results[0].address_components[2].short_name;
    let stateName = response.results[0].address_components[5].short_name;
    let zipCode = response.results[0].address_components[7].short_name;
    $('input[type=address]').val(`${houseNum} ${roadName}`);
    $('input[type=city]').val(cityName);
    $('input[type=state]').val(stateName);
    $('input[type=zip]').val(zipCode);
}


function getCategoriesApiResponse() {
    $.ajax(STORE.categoriesSettings);
}

function pushCategories(results) {
    for (let i = 0; i < results.response.categories.length; i++) {
        let categoryName = results.response.categories[i].name;
        let categoryId = results.response.categories[i].id;
        $('#categories').append(`<option value=${categoryId}>${categoryName}</option>`);
    }
}

function searchForResults() {
    event.preventDefault();
    let location = `${$('input[type=address]').val()},${$('input[type=city]').val()},${$('input[type=state]').val()},${$('input[type=zip]').val()}`;
    let query = $('input[type=search]').val();
    let categoryId = $('select[type=dropdown]').val();
    getSearchApiResponse(location, query, categoryId);
}

function getSearchApiResponse(location, query, categoryId) {
    // const settings = {
    //     url: FOURSQUARE_SEARCH_URL,
    //     data: {
    //         client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
    //         client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
    //         v: '20180823',
    //         limit: 10,
    //         radius: 10000,
    //         intent: 'browse',
    //         near: location,
    //         query: `${query === undefined ? '' : query}`,
    //         categoryId: `${categoryId === 'all' ? '' : categoryId}`
    //     },
    //     dataType: 'jsonp',
    //     type: 'GET',
    //     success: renderResponse
    // };
    $.ajax(STORE.foursquareSearchSettings);
}

function renderResponse(results) {
    console.log(results);
    let listOfVenues = results.response.venues;
    $('#results').empty();
    for (let i = 0; i < listOfVenues.length; i++) {
        let venueId = listOfVenues[i].id;
        let venueName = listOfVenues[i].name;
        let venueLocation = `${listOfVenues[i].location.formattedAddress[0]} ${listOfVenues[i].location.formattedAddress[1]}`;
        let lat = listOfVenues[i].location.lat;
        let lon = listOfVenues[i].location.lng;
        $('#results').append(`${getVenueApiResponse(venueId, renderVenue)}${renderMap(lat, lon, venueName)}`);
    }
}

function getVenueApiResponse(venueId, renderVenue) {
    const settings = {
        url: `${FOURSQUARE_VENUE_URL}/${venueId}`,
        data: {
            client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
            client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
            v: '20180823',
        },
        dataType: 'jsonp',
        type: 'GET',
        success: renderVenue
    };
    $.ajax(settings);
}

function renderVenue(venueInfo) {
    console.log(venueInfo);
    let name = venueInfo.response.venue.name;
    let photoUrl = venueInfo.response.photos.url;
    let distanceAway = venueInfo;
    return `
    <h3>${name}- ${distanceAway}</h3>
    <div class="venue-info hidden"> 
    <img src=${photoUrl} />
    <div class="map">
    </div>
    </div>
    `;
}

function renderMap(lat, lon, venueName) {
    let mapId = STORE.mapId;
    STORE.mapId++;
    return `
    <div id="map_${mapId}"><img src='https://maps.googleapis.com/maps/api/staticmap?markers=color:blue%7C${lat},${lon}&zoom=18&size=400x400&key=AIzaSyDiXUZ7Xr5xmORnIYMRrFh5-Y3HnnMzBc8'/></div>
    `;
}