diff --git a/usta/templates/usta/map.html b/usta/templates/usta/map.html index b8eef5fb82b9489cb44f898abe10e452c1896d0b..286fa605d83bae0f32839fbc80269f99f08e3b8b 100644 --- a/usta/templates/usta/map.html +++ b/usta/templates/usta/map.html @@ -136,6 +136,7 @@ <script> var map; +var ignore_hash_callback = 0; // Create a list of map markers. {% for category, places in locations.items %} @@ -149,6 +150,7 @@ function onMapButtonClick(checkbox, list) { var table = document.getElementById(checkbox.value); //console.log("Table: ", table); if (checkbox.checked) { + ignore_hash_callback += 1; window.location.replace("#" + checkbox.value + "-map"); setMap(list, map); if (table != null) { @@ -270,23 +272,65 @@ function initMap() { $("#Hotel-checkbox").click(); $("#Hospital-checkbox").click(); - // If url set, show proper one, otherwise show Tournament Site - if (window.location.hash == "#Tournament_Site-map") { - $("#Tournament_Site-checkbox").click(); - } else if (window.location.hash == "#Practice_Court-map") { - $("#Practice_Court-checkbox").click(); - } else if (window.location.hash == "#Parking-map") { - $("#Parking-checkbox").click(); - } else if (window.location.hash == "#Hotel-map") { - $("#Hotel-checkbox").click(); - } else if (window.location.hash == "#Hospital-map") { - $("#Hospital-checkbox").click(); - } else { - // default - $("#Tournament_Site-checkbox").click(); - } + setMapFromHash(window.location.hash, false); + } +} + +function clickCheckbox(checkbox_id, value) { + var checkbox = document.getElementById(checkbox_id); + if (checkbox.nodeName == "LABEL") { + // if this element is a label, get the checkbox + checkbox = checkbox.control; + } + if (checkbox.checked == value) { + // already checked but we need to click so change it, + // the click will set it back + checkbox.checked = !value; + } + + checkbox.click(); +} + +function setMapFromHash(hash, hideOthers) { + if (hideOthers) { + clickCheckbox("Tournament_Site-checkbox", false); + clickCheckbox("Practice_Court-checkbox", false); + clickCheckbox("Parking-checkbox", false); + clickCheckbox("Hotel-checkbox", false); + clickCheckbox("Hospital-checkbox", false); + } + + // If hash set, show proper one, otherwise show Tournament Site + if (hash == "#Tournament_Site-map") { + clickCheckbox("Tournament_Site-checkbox", true); + } else if (hash == "#Practice_Court-map") { + clickCheckbox("Practice_Court-checkbox", true); + } else if (hash == "#Parking-map") { + clickCheckbox("Parking-checkbox", true); + } else if (hash == "#Hotel-map") { + clickCheckbox("Hotel-checkbox", true); + } else if (hash == "#Hospital-map") { + clickCheckbox("Hospital-checkbox", true); + } else { + // default + clickCheckbox("Tournament_Site-checkbox", true); } } + +function handleOnHashChange() { + if (ignore_hash_callback > 0) + ignore_hash_callback -= 1; + + if (ignore_hash_callback == 0) { + setMapFromHash(window.location.hash, true); + $('body').animate({ + scrollTop: parseInt($('#body-content').offset().top) + }, 1000); + } +} + +window.onhashchange = handleOnHashChange; + </script> <script src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_API_KEY }}&signed_in=true&callback=initMap" async defer></script> {% endblock %}