Banner

Find the 15 nearest gyms & markets worldwide—get directions, addresses, websites, and distances instantly

International Gym & Market Finder

Embed

<!DOCTYPE html>
<html>
<head>
    <title>Fittivity - Find Nearby Places</title>

<style>

    #outputDiv a {
      text-decoration: underline; /* Underline hyperlinks */
    }
    #map {
      height: 400px; 
      width: 100%; /* Consistent width */
    }


.find-places-button {
  font-weight: light;
  padding: 5px 10px;
  margin-top: 10px;
  border: none;
  background-color: #4D7D99;
  color: white;
  border-radius: 5px; /* This makes the corners round */
}



    .separator {
      margin-top: 10px;
      border-top: 0px solid #ccc; /* Horizontal line */
      margin-bottom: 10px;
    }



.result-card {
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  background-color: #4D7D99;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-card h5 {
  margin-top: 0;
  color: #FFFFFF;
  font-weight: bold; /* This makes the text bold */
}

.result-card p {
  margin: 5px 0;
 color: #FFFFFF;
}

.result-card a {
  color: #ffffff;
  text-decoration: none;
}

.result-card a:hover {
  text-decoration: underline;
}



.heading-with-margin {
margin-top: 20px; /* Space above the heading */  
margin-bottom: 20px; /* Like saying 'leave a little space below' */
color: #ffffff;
}


.map-container {
  display: flex;
  justify-content: space-between;
}

.left-column {
  flex: 1;
  margin-right: 0px; /* Margin on the right of the left column */
}

.right-column {
  flex: 1;
  margin-left: 0px; /* Margin on the left of the right column */
}

@media (max-width: 600px) {
  .map-container {
    flex-direction: column;
  }

  .left-column, .right-column {
    width: 100%;
    margin-right: 0; /* Remove right margin for mobile view */
    margin-left: 0; /* Remove left margin for mobile view */
  }
}




  </style>


</head>
<body>
    <div class="container">
        <div class="left-column">
            <input id="destination" type="text" placeholder="Enter Destination Address">
            <button class="find-places-button" onclick="findNearbyPlaces()">Find Nearby Places</button>
            <div class="separator"></div>
            <div id="map"></div>
        </div>

        <div class="right-column">
            <div id="outputDiv" style="margin-top: 20px;"></div>
        </div>
    </div>

    <script>
        let map;
        let service;
        let originLocation;
        let originMarker;

        function initMap() {
            const downtownDallas = { lat: 32.7767, lng: -96.7970 };
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: downtownDallas
            });
            service = new google.maps.places.PlacesService(map);
        }

        function calculateDistance(location1, location2) {
            return google.maps.geometry.spherical.computeDistanceBetween(location1, location2);
        }

        function getPlaceDetails(placeId, callback) {
            const request = { placeId: placeId, fields: ['name', 'photos', 'website'] };
            service.getDetails(request, function (place, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    callback(place);
                }
            });
        }

function performSearch(keyword, callback, radius = 2000, attempt = 1) {
    const request = {
        location: originLocation,
        radius: radius.toString(),
        keyword: keyword
    };

    service.nearbySearch(request, function (results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            results.forEach(result => {
                result.distance = calculateDistance(originLocation, result.geometry.location);
            });
            results.sort((a, b) => a.distance - b.distance);

            if (results.length >= 15 || radius === 10000) {
                let detailedResults = results.slice(0, 15);
                let processedResults = 0;
                detailedResults.forEach((result) => {
                    getPlaceDetails(result.place_id, (detailedPlace) => {
                        result.photo = detailedPlace.photos ? detailedPlace.photos[0].getUrl() : '';
                        result.website = detailedPlace.website ? detailedPlace.website : '#';
                        processedResults++;
                        if (processedResults === detailedResults.length) {
                            callback(detailedResults);
                        }
                    });
                });
            } else if (attempt === 1) {
                performSearch(keyword, callback, 10000, 2);
            }
        }
    });
}
        function findNearbyPlaces() {
            const inputLocation = document.getElementById('destination').value;
            const outputDiv = document.getElementById('outputDiv');
            outputDiv.innerHTML = '';

            if (!inputLocation) {
                alert('Please enter a location.');
                return;
            }

            const geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': inputLocation }, function (results, status) {
                if (status === 'OK') {
                    originLocation = results[0].geometry.location;
                    map.setCenter(originLocation);

                    if (originMarker) originMarker.setMap(null);
                    originMarker = new google.maps.Marker({
                        map: map,
                        position: originLocation,
                        title: "Your Location",
                        icon: {
                            url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
                        }
                    });

                    performSearch('gym', function (gyms) {
                        outputDiv.innerHTML += '<h4 class="heading-with-margin">Closest Gyms</h4>';
                        gyms.forEach((gym, index) => {
                            const mapsUrl = createMarker(gym);
                            outputDiv.innerHTML += `
                                <div class="result-card">
                                    <h5>${index + 1}. ${gym.name}</h5>
                                    <img src="${gym.photo}" alt="Gym Photo" style="width:100px; height:100px;">
                                    <p>${gym.vicinity}</p>
                                    <p>Distance: ${Math.round(gym.distance)} meters</p>
                                    <a href="${mapsUrl}" target="_blank">View on Map</a>
                                    <a href="${gym.website}" target="_blank">Visit Website</a>
                                </div>
                            `;
                        });
                    });

                    performSearch('grocery', function (groceries) {
                        outputDiv.innerHTML += '<h4 class="heading-with-margin">Closest Grocery Stores</h4>';
                        groceries.forEach((grocery, index) => {
                            const mapsUrl = createMarker(grocery);
                            outputDiv.innerHTML += `
                                <div class="result-card">
                                    <h5>${index + 1}. ${grocery.name}</h5>
                                    <img src="${grocery.photo}" alt="Grocery Store Photo" style="width:100px; height:100px;">
                                    <p>${grocery.vicinity}</p>
                                    <p>Distance: ${Math.round(grocery.distance)} meters</p>
                                    <a href="${mapsUrl}" target="_blank">View on Map</a>
                                    <a href="${grocery.website}" target="_blank">Visit Website</a>
                                </div>
                            `;
                        });
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        function createMarker(place) {
            const marker = new google.maps.Marker({
                map,
                position: place.geometry.location,
                title: place.name
            });

            const infoWindow = new google.maps.InfoWindow({
                content: `<div><strong>${place.name}</strong><br>${place.vicinity}</div>`
            });

            marker.addListener('click', function () {
                infoWindow.open(map, marker);
            });

            return `https://www.google.com/maps/dir/?api=1&origin=${originLocation.lat()},${originLocation.lng()}&destination=${place.geometry.location.lat()},${place.geometry.location.lng()}&travelmode=walking`;
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2MBNoxFPm0JY1M_2Fap_peQNzA0QqEbU&libraries=places,geometry&callback=initMap" async defer></script>
</body>
</html>
