Trouble filtering icon markers on google maps api

Trouble filtering icon markers on google maps api
0.0 0

#1

I am trying to filter icons on a google map according to selected wind direction. In this simple example, I have two markers in total (Bowers and Slaughter), the user is to select a wind direction from a drop down select list, and one of the two launches (Bowers) is to be filtered out if North wind direction is selected. I built the filterFunction at the end of the code, and although it correctly reads the wind direction selected and displays the alert, it will not make the Bowers marker disappear as I intend. Plus, if I switch the alert and the set Visible lines of code, the alert statement will not occur at all, perhaps because the program hangs on the setVisible statement.

Please tell me how I can get my filter to work.

Thanks.

The code is:

<!DOCTYPE html>
<html>
<body>
<select id="windDir" type="text" onchange="filterFunction()">
  <option value="all">any all</option>
  <option value="North">N</option>
  <option value="Northeast">NE</option>
  <option value="East">E</option>
     <option value="Southeast">SE</option>
  <option value="South">S</option>
  <option value="Southwest">SW</option>
  <option value="West">W</option>     
   <option value="Northwest">NW</option>    
     
</select>   

<h1>Delmarva Windsurf Launches</h1>
     
<div id="googleMap" style="width:65%;height:1300px;"></div>

<script>
function myMap() {
     
    var posSlaughter = {lat: 38.914, lng: -75.304};
    var posBowers = {lat: 39.062, lng: -75.397};
    
var mapProp= {
    center:new google.maps.LatLng(38.1742, -75.520850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.HYBRID,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

   
    
    
   var markerSlaughter = new google.maps.Marker({
    position: posSlaughter,
    label: {
        color: 'pink',
        fontWeight: 'bold',
        text: "Slaughter Beach",
    },
        icon: {
            
          url: 'windsurfing5a.png',  
            labelOrigin: new google.maps.Point(85, 15),
             origin: new google.maps.Point(0, 0),
        },
    map: map,
    
    }
    
  );

   google.maps.event.addListener(markerSlaughter, 'click', function() {
     window.open("http://windsurfresource.com/slaughter.htm");      
 
});        
    
  var markerBowers = new google.maps.Marker({
    position: posBowers,
    label: {
        color: 'pink',
        fontWeight: 'bold',
        text: "Bowers Beach",
    },
        icon: {
            
          url: 'windsurfing5a.png',  
            labelOrigin: new google.maps.Point(80, 15),
             origin: new google.maps.Point(0, 0),
        },
    map: map,
    
    }
    
  );

   google.maps.event.addListener(markerBowers, 'click', function() {
     window.open("http://windsurfresource.com/bowers.htm");     
    
 
});   
    
   
}

                      
   function filterFunction() {
       var x = document.getElementById("windDir").value;
        if (x == "North") {   
                alert("north is selected");   
            markerBowers.setVisible(false);
            
        }
            
    } 

   
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=
KEY STRICKEN OUT HERE"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->

</body>
</html>



#2

I am attempting to cancel this post because I solved it on my own.
Thanks to you Kevin for showing me the browser console contrl-shift-j.
Upon doing so, I found the marker variable markerBowers undefined outside the map function. Therefore, instead of declaring it within the map function, I declare it outside the map function so that it is global. Then my code works as I intend, with the Bowers marker disappearing upon North wind direction being selected.
I do not have the powers to delete this post, but
THIS ISSUE IS CLOSED