I'm currently working on implementing a feature that allows users to set the radius from their center location on a Google map. While I have most of the code in place, I'm struggling to get it fully functional. Below is the snippet of code I've been using. Any assistance would be greatly appreciated.
CSS and HTML Code
Search Radius:
<input type="range" name="search_radius" id="search_radius" min="10" max="100">
<script>
// Add a Circle overlay to the map.
circle = new google.maps.Circle({
map: map,
radius: 10
});
// Binding the Circle's center to the Marker's position.
circle.bindTo('center', marker, 'position');
$("#search_radius").slider({
orientation: "vertical",
range: "min",
max: 3000,
min: 100,
value: 500,
slide: function(event, ui) {
updateRadius(circle, ui.value);
}
});
function updateRadius(circle, rad) {
circle.setRadius(rad);
}
google.maps.event.addDomListener(window, 'load', init);
</script
<center>
<script>getLocation();</script>
<button onclick="getLocation()">Get My Location</button><p id="map"></p>
Search Radius:
<input type="range" name="search_radius" id="search_radius" min="10" max="100">
<script>
// Adding a Circle overlay to the map.
circle = new google.maps.Circle({
map: map,
radius: 10
});
// Binding the Circle's center to the Marker's position.
circle.bindTo('center', marker, 'position');
// Setting up the slider for search radius adjustment.
$("#search_radius").slider({
orientation: "vertical",
range: "min",
max: 3000,
min: 100,
value: 500,
slide: function(event, ui) {
updateRadius(circle, ui.value);
}
});
function updateRadius(circle, rad) {
circle.setRadius(rad);
}
google.maps.event.addDomListener(window, 'load', init);
</script
<!-- Checking Geolocation Support -->
<script>
var x = document.getElementById("map");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation not supported by this browser.";
}
}
function showPosition(position) {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: position.coords.latitude, lng: position.coords.longitude},
zoom: 12
});
}
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 53.3498, lng: -6.2603},
zoom: 6
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>