Attractions.cc is designed for Colorado's torusim bureau to help potential visitors find important locations all around the state.
Shown below is the initial view the user will have on the website.
- At the top of the page is the location selection filters.
- The main body of the page is the custom implementation of Google Maps.
- In the bottom left of the page is the location list, reset zoom button, and the help button.
This is the type selection menu. There is a custom option where the user can input any keyword(s) that they would like to search for.
This is the main function that is called when the map loads:
window.initMap = function () {
// This is setting up the map with the default values and style.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: { lat: 0, lng: 0 },
zoomDelta: 0.25,
styles: defaultMapStyle
});
// This makes sure that the user has geolocation enabled for the website.
if (navigator.geolocation) {
// This find the user location.
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
// Creates a marker at the user's location
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: 'Your Location'
});
}, function (error) {
// console.log(error)
});
} else {
alert('Geolocation is not supported/enabled by this browser.\n\nPlease use a browser that supports geolocation or enable geolocation.\nhttps://www.gps-coordinates.net/geolocation');
}
// This statement is used to detect if the map is idle. If so, it will check the zoom level of the map.
google.maps.event.addListener(map, 'idle', function () {
// updateResultsList();
if (map.getZoom() < 15) {
zoomedIn = false;
}
});
// This statement is used to detect if the user is in 'Street View' mode.
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function () {
streetView = this.getVisible() ? true : false;
});
}
This is how the code updates the results list:
function updateResultsList() {
// Read the bounds of the map being displayed.
bounds = map.getBounds();
$('#results-list').empty();
// Iterate through all of the markers that are displayed on the *entire* map.
for (let i = 0, l = markersFinal.length; i < l; i++) {
current_marker = markersFinal[i];
/* If the current marker is visible within the bounds of the current map, let's add it as a list item to #nearby-results that's located above this script. */
if (bounds.contains(current_marker.getPosition())) {
/* Only add a list item if it doesn't already exist. This is so that if the browser is resized or the tablet or phone is rotated, we don't have multiple results. */
if (0 === $('#map-marker-' + i).length) {
$('#results-list').append(
$('<li />')
.attr('id', 'map-marker-' + i)
.attr('class', 'depot-result')
.html("<a href=\"javascript:void(0);\">" + current_marker.title + "</a>")
.click(function () {
// This finds the div holding the marker image/data and clicks it.
document.querySelector("[title=\"" + this.textContent + "\"]").dispatchEvent(new Event("click"));
})
);
}
}
}
}
This is the function that is called when the map needs to update for a changed user filter:
window.updateMap = function (
types = [''],
keyword = "",
radius = 20000,
price = null,
ratingMin = 0,
isOpen = null) {
// console.log(types, keyword, radius, price, ratingMin, isOpen);
toggleResultsFirstLoad();
// This is setting the global variable to the value of the local variable.
minRating = ratingMin;
$('#results-list').empty();
deleteMarkers();
resetMapArrays();
find(initialLocation, types, keyword, radius, price, isOpen);
}
The above function is called from the navagation bar's 'update' button with:
updateMap(
navigationValues.typeArray, // Types
navigationValues.keyword, // Keyword
navigationValues.radius, // Radius
navigationValues.price, // Price
navigationValues.ratingMin, // Min Rating
navigationValues.isOpen // Is Open
);
Client: CSS3, HTML5, Javascript
Server: Github Pages, Google Maps API