create a global accessible array:
markers=[];
store the markers in this array, and store the numeric value as a property of the markers:
var marker = new google.maps.Marker({ position: new google.maps.LatLng(data[i][3], data[i][2]), map: map, value:data[i][4], visible:slidervalue >= data[i][4] }); markers.push(marker);
in
updateSlider
iterate over the array and set the visible-property depending on the comparision:function updateSlider(slideAmount) { for(var i=0;i<markers.length;++i){ markers[i].setVisible(slideAmount>=markers[i].get('value')); } slidervalue = slideAmount; document.getElementById("slidervalue").innerHTML = slidervalue; }
Hide/show google maps markers based on slider value compared to data value
-
27-09-2022 - |
Pergunta
First off, I don't know much about Google maps or Javascript and most of what I have so far is copied and pasted and stuck together from various tutorials (although I do understand what does what).
I have a map showing markers based on their location from a spreadsheet (via JSON feed). In this spreadsheet I also have a numerical value stored for each marker in data[i][4].
Finally have a bog standard html input type range slider and have the value of this stored in a global variable (slidervalue) that constantly updates as the slider moves.
As the slider moves, if the numerical value stored in the data for a marker is less than slidervalue that marker should be visible. If the data value is greater than slidervalue that marker should be hidden.
I assume this can be achieved using an if else statement and Google maps setvisible.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pound A Pint</title>
<style>
html, body {
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
#map_canvas {
height: 100%;
width: calc(100% - 200px);
float:right;
}
#name {
float:left;
}
#price {
float:left;
}
#sliderAmount {
background-color: red;
display: inline-block;
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
var map;
var image = 'icon.png';
var slidervalue = 400;
function myFunction()
{
document.getElementById("sliderAmount").innerHTML= slidervalue;
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.5, -0.1),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.default,
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
document.getElementById("name").innerHTML= data[i][0];
document.getElementById("pricespan").innerHTML= data[i][4];
}
})(marker, i));
}
}
function updateSlider(slideAmount) {
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
</script>
</head>
<body onload="initialize()">
<div id="name">Name</div>
<div id="price">£<span id="pricespan"></span></div>
<input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)">
<div onclick="myFunction()" id="sliderAmount">Click me</div>
<div id="slidervalue"></div>
<div id="map_canvas"></div>
</body>
</html>
Thanks for any help.
Solução